html调用摄像头拍照，并生成预览

最新推荐文章于 2023-07-03 13:49:36 发布

hoperxt

最新推荐文章于 2023-07-03 13:49:36 发布

阅读量2.8k

点赞数

分类专栏： J2EE 文章标签： html html5 摄像头

本文链接：https://blog.csdn.net/HoperandEvian/article/details/40346837

版权

J2EE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>签到页面</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">
	function takephoto(){
		$('#photo').click();
	}
</script>
</head>
<body>
<table style="width: 100%">
<tr>
	<td style="width: 12%">现场照片：</td>
	<td style="width: 8%"><img src="about:blank" alt="" id="show-picture" width="150px;"height="150px;"></td>
	<td><button οnclick="takephoto()">拍照</button></td>
</tr>
</table>
<form action="upload" method="POST" enctype="multipart/form-data">
<table style="width: 100%">
	<tr>
		<td style="width: 12%">
			<input type="file" accept="image/*" capture="camera" id="photo" name="photo" style="display: none;"/>
		</td>
		<td></td>
	</tr>
	<tr>
		<td>现场类型：</td>
		<td><input type="text" value="考勤" style="width: 99%" disabled="disabled"></td>
	</tr>
	<tr>
		<td>记录反馈：</td>
		<td><textarea rows="3" id="remark" name="remark" style="width: 99%"></textarea></td>
	</tr>
	<tr>
		<td colspan="2"><input id="btn" type="submit" value="签到" style="width: 20%; height: 30px;"/></td>
	</tr>
</table>
</form>
</body>
<script type="text/javascript">
(function () {
    var takePicture = document.querySelector("#photo"),
        showPicture = document.querySelector("#show-picture");
    if (takePicture && showPicture) {
        takePicture.onchange = function (event) {
            var files = event.target.files,
                file;
            if (files && files.length > 0) {
                file = files[0];
                try {
                    var URL = window.URL || window.webkitURL;
                    var imgURL = URL.createObjectURL(file);
                    showPicture.src = imgURL;
                    URL.revokeObjectURL(imgURL);
                }
                catch (e) {
                    try {
                        var fileReader = new FileReader();
                        fileReader.onload = function (event) {
                            showPicture.src = event.target.result;
                        };
                        fileReader.readAsDataURL(file);
                    }
                    catch (e) {
                        var error = document.querySelector("#error");
                        if (error) {
                            error.innerHTML = "Neither createObjectURL or FileReader are supported";
                        }
                    }
                }
            }
        };
    }
})();
</script>
</html>

参考内容：http://blog.jianchihu.net/talking-about-the-html5-camera-api.html

在手机或ipad上可以使用，点击拍照按钮可以调用摄像头，拍摄完成后能生成预览。

在电脑上，用360浏览器和火狐浏览器同样能生成预览，谷歌浏览器无法生成预览。点击拍照按钮会打开文件选择器。

在后台可通过FileUpload获取到照片。

另外，最后那段js代码必须放在下面才能生效，否则takePicture和showPicture会为null