261 lines
8.8 KiB
HTML
261 lines
8.8 KiB
HTML
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<title>html5拍照</title>
|
|
<style type="text/css">
|
|
body
|
|
{
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
#cameraBtn, #cameraDiv
|
|
{
|
|
padding: 5px;
|
|
}
|
|
|
|
.big-btn-blue
|
|
{
|
|
display: inline-block;
|
|
min-width: 80px;
|
|
height: 30px;
|
|
margin: 0 5px;
|
|
padding: 0 15px;
|
|
vertical-align: top;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
font-family: "微软雅黑";
|
|
color: #fff;
|
|
border-radius: 2px;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.big-btn-blue
|
|
{
|
|
-webkit-transition: all 0.3s ease;
|
|
-moz-transition: all 0.3s ease;
|
|
transition: all 0.3s ease;
|
|
}
|
|
/*动画*/
|
|
.big-btn-blue
|
|
{
|
|
border: 1px solid #3194dd;
|
|
background-color: #3194dd;
|
|
}
|
|
/*纯蓝色*/
|
|
</style>
|
|
<script type="text/javascript">
|
|
|
|
//访问用户媒体设备的兼容方法
|
|
function getUserMedia1(constrains, success, error)
|
|
{
|
|
if (navigator.mediaDevices.getUserMedia)
|
|
{
|
|
//最新标准API
|
|
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
|
|
}
|
|
else if (navigator.webkitGetUserMedia)
|
|
{
|
|
//webkit内核浏览器
|
|
navigator.webkitGetUserMedia(constrains).then(success).catch(error);
|
|
}
|
|
else if (navigator.mozGetUserMedia)
|
|
{
|
|
//Firefox浏览器
|
|
navagator.mozGetUserMedia(constrains).then(success).catch(error);
|
|
}
|
|
else if (navigator.getUserMedia)
|
|
{
|
|
//旧版API
|
|
navigator.getUserMedia(constrains).then(success).catch(error);
|
|
}
|
|
else
|
|
{
|
|
alert("不支持的浏览器");
|
|
}
|
|
}
|
|
|
|
//成功的回调函数
|
|
function success(stream)
|
|
{
|
|
//兼容webkit内核浏览器
|
|
var CompatibleURL = window.URL || window.webkitURL;
|
|
//将视频流设置为video元素的源
|
|
try
|
|
{
|
|
video.srcObject = stream;
|
|
}
|
|
catch (e)
|
|
{
|
|
video.src = CompatibleURL.createObjectURL(stream);
|
|
}
|
|
//播放视频
|
|
video.play();
|
|
}
|
|
|
|
//异常的回调函数
|
|
function error(error)
|
|
{
|
|
alert("访问用户媒体设备失败," + error.name + "" + error.message);
|
|
}
|
|
|
|
/**
|
|
* 获取当前静态页面的参数
|
|
* 返回值和使用方法类似java request的getparamater
|
|
* 不同: 当取得的为数组(length>1)时调用toString()返回(逗号分隔每个元素)
|
|
* @param {Object} name
|
|
* @return {TypeName}
|
|
*/
|
|
function getPara(name, search)
|
|
{
|
|
var p = getParas(name, search);
|
|
if (p.length == 0)
|
|
{
|
|
return null;
|
|
}
|
|
else if (p.length == 1)
|
|
{
|
|
return p[0];
|
|
}
|
|
else
|
|
{
|
|
return p.toString();
|
|
}
|
|
}
|
|
|
|
/**获取当前静态页面的参数
|
|
* 返回值和使用方法类似java request的getparamaterValues
|
|
* @param {Object} name 要取出的参数名,可以在参数字符串中重复出现
|
|
* @param {Object} search 手工指定要解析的参数字符串,默认为当前页面后跟的参数
|
|
* @return {TypeName}
|
|
*/
|
|
function getParas(name, search) {
|
|
if (!search)
|
|
{
|
|
search = window.location.search.substr(1);//1.html?a=1&b=2
|
|
}
|
|
var para = [];
|
|
var pairs = search.split("&");//a=1&b=2&b=2&c=2&b=2
|
|
for (var i = 0; i < pairs.length; i = i + 1)
|
|
{
|
|
var sign = pairs[i].indexOf("=");
|
|
if (sign == -1)
|
|
{
|
|
//如果没有找到=号，那么就跳过，跳到下一个字符串（下一个循环）。
|
|
continue;
|
|
}
|
|
var aKey = pairs[i].substring(0, sign);
|
|
if (aKey == name) {
|
|
para.push(unescape(pairs[i].substring(sign + 1)));
|
|
}
|
|
}
|
|
return para;
|
|
}
|
|
|
|
//开启摄像头
|
|
function captureInit()
|
|
{
|
|
if ((navigator.mediaDevices != undefined && navigator.mediaDevices.getUserMedia != undefined) || navigator.getUserMedia != undefined || navigator.webkitGetUserMedia != undefined || navigator.mozGetUserMedia != undefined)
|
|
{
|
|
document.getElementById("help").style.display = "none"; //调用用户媒体设备，访问摄像头,改为触发事件
|
|
getUserMedia1({ video: { width: imgWidth, height: imgHeight } }, success, error);
|
|
if (captureState == 0)
|
|
{
|
|
captureState = 1;//标记此按钮已点击
|
|
}
|
|
}
|
|
else
|
|
{
|
|
captureState = 0;//异常标识按钮没点
|
|
alert("你的浏览器不支持访问用户媒体设备或访问地址不是https开头,您可以点击右侧下载解决方案");
|
|
document.getElementById("help").style.display = "inline-block";
|
|
}
|
|
}
|
|
|
|
//注册拍照按钮的单击事件
|
|
function capture() {
|
|
//绘制画面
|
|
if (captureState == 0)
|
|
{
|
|
alert("请先开启摄像头");
|
|
return;
|
|
}
|
|
context.drawImage(video, 0, 0, imgWidth, imgHeight);//后面两个长宽
|
|
//canvas.toDataURL("image/png");//即可得到base64编码
|
|
captureState = 2;
|
|
}
|
|
|
|
//确认按钮返回给父页面的函数
|
|
function queren() {
|
|
if (captureState != 2)
|
|
{
|
|
alert("请先开启摄像头并拍照");
|
|
return;
|
|
}
|
|
var base64 = canvas.toDataURL("image/jpeg");
|
|
var pics = {};
|
|
pics.filetypeid = filetypeid;//返回给前端
|
|
pics.base64 = base64;
|
|
if (window.opener)
|
|
{
|
|
window.opener[cb](pics);// /FileUploadTmp/为项目临时文件夹相对路径
|
|
window.close();
|
|
}
|
|
else if (window.parent)
|
|
{
|
|
window.parent[cb](pics);
|
|
window.parent.$("#dialog_ifr_html").dialog("close");//close会导致flash未执行完就销毁,页面JS报错
|
|
}
|
|
else
|
|
{
|
|
window.close();
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="cameraBtn">
|
|
<input type="button" id="init" onclick="captureInit()" value="开启摄像头" />
|
|
<input type="button" id="capture" onclick="capture()" value="拍照" />
|
|
<input type="button" id="queren" onclick="queren()" value="确定" />
|
|
<span id="help" style="display:none;"><a href="/static/ad/down/camera.doc">点此下载无法拍照的解决方案</a></span>
|
|
</div>
|
|
|
|
|
|
<div id="cameraDiv">
|
|
<!-- 视频流 -->
|
|
<video id="video" autoplay playsinline style="width: 300px;height: 200px"></video>
|
|
<!--描绘video截图-->
|
|
<canvas id="canvas" autoplay playsinline width="300" height="200"></canvas>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
var cb = getPara("cb") || "setImg";
|
|
var filetypeid = getPara("filetypeid") || "filetypeid";//附件类型id
|
|
var video = document.getElementById("video");
|
|
var canvas = document.getElementById("canvas");
|
|
var context = canvas.getContext("2d");
|
|
var imgWidth = getPara("width") || "300";//这个值div的宽一致
|
|
var imgHeight = getPara("height") || "200";//这个值div的高一致
|
|
var captureState = 0;//未开启,1已开启,2已拍照,为2才可点击确认按钮
|
|
var style = getPara("style") || "big-btn-blue";
|
|
video.style.width = imgWidth;
|
|
video.style.height = imgHeight;
|
|
var st = style.split(",");
|
|
document.getElementById("init").className = st[0];
|
|
document.getElementById("capture").className = st[1] || st[0];
|
|
document.getElementById("queren").className = st[2] || st[0];
|
|
document.getElementById("help").className = st[3] || st[0];
|
|
</script>
|
|
</body>
|
|
</html>
|