html代码:
<div id="contentHolder">
<video id="video" width="100%" height="527px" autoplay></video>
<button id="snap" style="display:none">拍照</button>
<button>返回</button>
<button id="cancleBtn">重拍</button>
<button id="stopBtn"><img src="img/takePhoto.png"></button>
<button id="uploadBtn">上传<button>
<canvas style="display:none" id="canvas" width="320" height="320"></canvas>//使用者看到的是video，而上传的是canvas中的画像
</div>
js代码:
function onload();
try {
document.createElement("canvas").getContext("2d"); //动态创建一个canvas元 ，并获取他2Dcontext。如果出现异常则表示不支持
alert("浏览器支持HTML5 CANVAS");
}catch (e) {
alert("浏览器不支持HTML5 CANVAS");
}
document.createElement("canvas").getContext("2d");
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function (error) { //错误返回
console.log("Video capture error: ", error.code);
};
//navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow
if (navigator.getUserMedia) {
navigator.getUserMedia(videoObj, function (stream) {
video.src = stream;
video.play();
}, errBack);
}else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
//这个是拍照按钮的事件，
$("#snap").click(function () {
context.drawImage(video, 0, 0, 320, 320);
//CatchCode();
});
//定时器
var interval = setInterval(CatchCode, "300"); //每300秒调用一遍CatchCode()
var imgData;
function CatchCode() {
$("#snap").click();
//实际运用可不写，测试代 ， 为单击拍照按钮就获取了当前图像，有其他用途
var canvans = document.getElementById("canvas");
//获取浏览器页面的画布对象
//以下开始编 数据
imgData = canvans.toDataURL();
console.log(imgData);
}
$("#stopBtn").click(function(){ //点击拍照
video.pause(); //暂停video
clearInterval(interval); //清除定时器
})
$("#cancleBtn").click(function(){ //点击取消
video.play(); //启动video，显示图像
interval = setInterval(CatchCode, "300"); //启动定时器
})
$("#uploadBtn").click(function(){ //点击上传
console.log(imgData);
var base64Data = imgData.substr(22); 将canvas中的图像转成base64数据
//在前端截取22位之后的字符串作为图像数据
//开始异步上传
$.post(rootUrl+"/user/uploadUserImgeBase.do", { "file": base64Data,"token":token}, function (data) {
console.log(data);
if (data.responseCode == "00000") {
alertModel("上传成功!");
}else {
alertModel(data.responseMsg);
}
}, "json"); //数据格式，我用的是json
})
}