您的位置:首页 > Web前端 > JavaScript

HTML5 + JS 调取摄像头拍照下载

2016-12-15 10:51 239 查看
<video id="video" width="640" height="480" autoplay></video>
<br>
<button id="snap">Snap Photo</button>

<button onclick="sendUrl()">提交下载</button>
<canvas id="canvas" width="640" height="480"></canvas>
<img src="" alt="1111">


下面是JS+html5调用电脑摄像头,目前处于安全考虑谷歌不支持

window.addEventListener("DOMContentLoaded", function() {
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);
};
if(navigator.getUserMedia) { // Standarda
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj,function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});

}, false);


现在是将canvas里面的图片下载到本地,以便于file上传

function download(type) {
//设置保存图片的类型
var imgdata = canvas.toDataURL(type);
//将mime-type改为image/octet-stream,强制让浏览器下载
var fixtype = function (type) {
type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
}
imgdata = imgdata.replace(fixtype(type), 'image/octet-stream')
//将图片保存到本地
var saveFile = function (data, filename) {
var link = document.createElement('a');
link.href = data;
link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
link.dispatchEvent(event);
}
var filename = new Date().toLocaleDateString() + '.' + type;
saveFile(imgdata, filename);
}


下面调用展示

function sendUrl(){
var canvas = document.getElementById('canvas'),
var imgSrc = canvas.toDataURL();
document.getElementsByTagName('img')[0].src = imgSrc;
context.clearRect(video, 0, 0, 640, 480)
var type = 'png';
download(type);
clearCanvas()

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: