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() }
相关文章推荐
- HTML5 + JS 调取摄像头拍照下载
- 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js
- 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js
- 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js
- 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js
- 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js
- HTML5调用手机摄像头拍照 - getUserMedia.js
- 基于html5、JS实现的拍照上传图片
- 如何使用HTML5实现利用摄像头拍照上传功能
- Java调用摄像头进行拍照源码,并且有JMF下载地址
- HTML5调用摄像头实现拍照功能(兼容各大主流浏览器)
- 利用html5调用本地摄像头拍照上传图片
- HTML5利用WebRTC的getUserMedia获取摄像头信息模拟拍照及视频(完整示例)
- 如何使用HTML5实现利用摄像头拍照上传功能
- html5打开摄像头并用canvas模拟拍照
- IOS调取系统摄像头并拍照
- HTML5 Canvas+JS控制电脑或手机上的摄像头实例
- 利用html5调用本地摄像头拍照上传图片[转]
- 基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
- html5调用手机摄像头,实现拍照上传功能