您的位置：首页 > Web前端 > HTML

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

2014-10-21 16:20 726 查看

<%@ 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 onclick="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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航