h5+ 调用本地摄像头拍照

使用H5+调用摄像头进行拍照

最新推荐文章于 2025-09-16 16:35:06 发布

原创

最新推荐文章于 2025-09-16 16:35:06 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#h5+

本文详细介绍了如何利用H5+技术在移动应用中调用用户的本地摄像头进行拍照操作，包括相关API的使用和注意事项，适用于移动端开发。

<html>
<div id="form">
   	<div class="name-box">
   		<span>姓名</span>
   		<input id="userName" type="text" placeholder="请输入姓名"/>
   	</div>
   	<div class="id-box">
   		<span>身份证号</span>
   		<input id="id" type="text" placeholder="请输入身份证号"/>
   	</div> 
   	<div class="photo-box submit submitBox">
   		<input type="hidden" id="picIndex" value="0">
   		<button id="cameraBtn"  onclick="showActionSheet()"></button>
   		<div id='image-list' class="row image-list"></div>
		<img src="../../resource/limit/camera.png" />
		<img id="imgs">
   	</div>
  	</div>
</html>
<script>
// 扩展API加载完毕后调用onPlusReady回调函数 
document.addEventListener( "plusready", onPlusReady, false );
// 扩展API加载完毕，现在可以正常调用扩展API 
function onPlusReady() {
	console.log("plusready");
}

 //点击事件，弹出选择摄像头和相册的选项
function showActionSheet() {  
    var bts = [{  
        title: