随着flash被禁用,flash上传附件的方式已成为过去,现在开始用html5上传了.本片文章就是介绍如何使用html5拍照,其实挺简单的原理:
调用摄像头采集视频流,利用canvas的特性生成base64图片,
其完整代码如下,需要使用https访问才不会有调用摄像头安全问题,另外IE内核是无法使用的.这个可以作为一个单独页面来被父页面调用
<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 getUserMedia(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";
//调用用户媒体设备，访问摄像头,改为触发事件
getUserMedia({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 style="width: 300px;height: 200px"></video>
<!--描绘video截图-->
<canvas id="canvas" 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>
相信略懂js和html5的人都能看懂代码,非常的简单.而且都不需要用到jquery.
另外备注下:IE内核浏览器是无法实现的.因为不支持getUserMedia方法.
注:文章内容来自于本人在CSDN上发布的文章