html5网页调起相机拍照

最新推荐文章于 2024-06-22 15:47:20 发布

xinyu391

最新推荐文章于 2024-06-22 15:47:20 发布

阅读量1.2w

点赞数

分类专栏：其他

本文链接：https://blog.csdn.net/xinyu391/article/details/79415973

版权

其他专栏收录该内容

8 篇文章 0 订阅

订阅专栏

使用html5中 input的 capture属性，设定为camera，即可调起相机，页面显示跟上传文件一样，点击后调起camera。

源码如下：

<html>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <head>
    </head>
	<script>
	function onTake(){	
		var file = document.getElementById("btn_camera").files[0];  
		 var reader = new FileReader();
		reader.οnlοad=function(e) {  
		document.getElementById("image").src = e.target.result;	
		}
		reader.readAsDataURL(file);
		
	}
	</script>
    <body>
	<p>open camer demo</p>
	<form id="take_picture">
        <input id="btn_camera" type="file" accept="image/*" capture="camera" οnchange="onTake()" />
	</form>
	<img id="image" width="300" height="200" />
    </body>
</html>