h5调用移动端摄像头实现拍照获取图片

最新推荐文章于 2024-06-06 15:19:01 发布

皮卡皮卡~啾

最新推荐文章于 2024-06-06 15:19:01 发布

阅读量3k

点赞数 4

分类专栏：个人日常开发记录文章标签： h5 摄像头 js

本文链接：https://blog.csdn.net/qq_34310906/article/details/107161349

版权

个人日常开发记录专栏收录该内容

48 篇文章 0 订阅

订阅专栏

需求简述：打开移动端相机进行拍照，并且获取图片

效果图

相关代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>

		<body>
			<div style="width: 130px; background: orange;color: #fff;border-radius: 2px; margin: 30px auto;text-align: center; line-height: 36px;position: relative;">
				<span>打开摄像头</span>
				<input type="file" id="image" accept="image/*" capture="camera" multiple="" style=" position: absolute; width: 100%;height: 100%;left: 0;right: 0;bottom: 0;top: 0; opacity: 0;">
			</div>
			<img src="" id="photoimg" style="width: 100%;"/>
		</body>
	</body>
	<script type="text/javascript">
		document.getElementById('image').addEventListener('change', function() {
			var reader = new FileReader();
			reader.onload = function(e) {
				 alert(e)
				getImg(this.result);
			};
			reader.readAsDataURL(this.files[0]);
		}, false);
		var getImg = function(res) {
		document.getElementById('photoimg').src = res;
			
		}
	</script>

</html>