HTML5页面仅允许拍照

Html5原生的就能够支持拍照选择图片,不需要JS调用。

下面的是单一调用的方式:

<!– 调用照相机,拍照 –>

<input type="file" accept="image/*" capture="camera">

<!– 调用摄像机,视频 –>

<input type="file" accept="video/*" capture="camcorder">

<!– 调用录音机,录音 –>

<input type="file" accept="audio/*" capture="microphone">

capture表示,可以捕获到系统默认的设备,比如:camera–照相机;camcorder–摄像机;microphone–录音。

如果想要选择图库或者拍照,直接使用下面这种:

<input type="file" accept="image/*" multiple>

iOS的测试通过,浏览器、App和微信都能使用。
Android因为各种深度定制,不一定都能够兼容capture=”camera”,部分品牌仍然显示相册图库。

如果用于公众号,建议使用微信JS,通过微信接口打开相机:

<!-- wp:paragraph -->
<p>wx.chooseImage({</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp; count: 1, // 默认9</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp; sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp; sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp; success: function (res) {</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp; var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>}})</p>
<!-- /wp:paragraph -->