html5调用摄像头实现拍照并本地保存

原创 2016年05月30日 13:49:03

这是本人从网上搜索的知识点进行整理综合得到的,有些地方自己都不是太明白!但是可以用!



<!--注意:该代码一定要放到服务器中去访问才可以看到效果,并且使用谷歌浏览器,其他浏览器我使用的是不行的不知道为什么-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="gbk">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>html5调用摄像头实现拍照本地保存</title>
	
</head>
<body>
<video id="video" autoplay=""style='width:640px;height:480px'></video>
<button id="paizhao">拍照</button> 
<button onClick="saveFile(filename);" type="button">下载图片</button>

<canvas id="canvas" width="640" height="480"></canvas>
<script type="text/javascript">
	
	var video=document.getElementById("video");
	var context=canvas.getContext("2d");
	var errocb=function(){
		console.log("sth srong");
	}
	//调用电脑摄像头并将画面显示在网页
	if(navigator.getUserMedia){
		navigator.getUserMedia({"video":true},function(stream){
			video.src=stream;
			video.play();
		},errocb);
	}else if(navigator.webkitGetUserMedia){
		navigator.webkitGetUserMedia({"video":true},function(stream){
			video.src=window.webkitURL.createObjectURL(stream);
			video.play();
		},errocb);
	}
	//利用canvas 将当前video的画面画到canvas标签节点中
	document.getElementById("paizhao").addEventListener("click",function(){
		context.drawImage(video,0,0,640,480);
	});
	
	

	//下面的代码是保存canvas标签里的图片并且将其按一定的规则重命名
	var type = 'png';
	
	var _fixType = function(type) {
    type = type.toLowerCase().replace(/jpg/i, 'jpeg');
    var r = type.match(/png|jpeg|bmp|gif/)[0];
    return 'image/' + r;
};
/**
 * @param  {String} filename 文件名
 */
	var saveFile = function(filename){
	//获取canvas标签里的图片内容
	var imgData = document.getElementById('canvas').toDataURL(type);
	imgData = imgData.replace(_fixType(type),'image/octet-stream');
	
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = imgData;
    save_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);
    save_link.dispatchEvent(event);
};
   
// 下载后的文件名规则
	var filename = (new Date()).getTime() + '.' + type;
	
</script>
</body>
</html>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

如何使用HTML5实现利用摄像头拍照上传功能(java版)

前台: id="contentHolder"> id="video" width="320" height="320" autoplay> id="picture" s...

HTML5调用摄像头实现拍照功能(兼容各大主流浏览器)

HTML5实现摄像头调用并拍照,兼容各大浏览器,需要的来拿

HTML5 调用手机摄像头 Demo

Insert title here PICTURE var video = document.getElementById("video"); var context = canvas.ge...

html5调用本地摄像头

THE CURRENT STATE OF HTML5 FORMS Wufoo The accept Attribute accept="image/*"> (images only) ...

利用html5调用本地摄像头拍照上传图片

html5概念啥的就不废话了,不知道的 百度, 谷歌一堆。。今天学了学html5中的Canvas结合新增的标签来获取本地摄像头,在html5之前,要在浏览器获取本地摄像头只有通过插件(Active...

[Phonegap+Sencha Touch] 移动开发29 安卓navigator.camera.getPicture得到图片的真实路径

phonegap的拍照插件选择图库中的图片,代码如下: navigator.camera.getPicture(function(uri){ console.log(uri);//这里得到图片的u...

利用HTML5中Canvas处理并存储图片

HTML5中增加的Canvas元素,配合JS灵活的语法,处理起图片变得异常简单,不需要在客户端用C/C++写一大堆代码,对于熟悉JS的程序员来说,只需要考虑处理图片的逻辑了。        canva...

HTML5调用照相机并自定义显示获取到的图片(FileReader)

越来越多的移动端网页流行,在手机上拍摄照片或者从相册中选取照片并上传的功能不可或缺。本文以实例说明上述功能如何实现,并介绍FileReader对象。

利用html5调用本地摄像头拍照上传图片

html5概念啥的就不废话了,不知道的 百度, 谷歌一堆。。今天学了学html5中的Canvas结合新增的标签来获取本地摄像头,在html5之前,要在浏览器获取本地摄像头只有通过插件(ActiveX,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)