（pc端和移动端）自动拉起摄像头不用点击事件，并且处理了兼容性问题

最新推荐文章于 2023-07-03 13:49:36 发布

从19年开始写

最新推荐文章于 2023-07-03 13:49:36 发布

阅读量443

点赞数

分类专栏： web端文章标签： jquery html5

本文链接：https://blog.csdn.net/weixin_44768635/article/details/105675180

版权

web端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

1. 首先我们肯定要先有一个可以点击的input

<body>
		<div class = "wrapper">
			 <input type = "file" accept= "image/*" capture= "camera" id="img" />
			 <button class="button">上传照片 </button>	
		</div>
		<img id="pic" src="img/pic.png"/>
</body>

因为我这边是用文件流上传的。所以input的type是file
如果正常来说的话，我们是要通过点击那个input拉取摄像头.效果如下
在这里插入图片描述
JS方法如下：

<script>
	document.getElementById('img').addEventListener('change', function () {
		     var reader = new FileReader();
		     reader.onload = function (e) {
		          //调用图片压缩方法：compress();
		     };
		
			 var objUrl = getObjectURL(this.files[0]);//调用函数调取图片地址
			 　　obUrl = objUrl;
			 　　console.log("objUrl = " + objUrl);
			 if (objUrl) {
			 　　$("#pic").attr("src", objUrl).show();//选择img的ID，给src赋值
			 }
		     reader.readAsDataURL(this.files[0]);
		     console.log(this.files[0]);
		     var fileSize = Math.round( this.files[0].size/1024/1024) ; //以M为单位
		     //this.files[0] 该信息包含：图片的大小，以byte计算 获取size的方法如下：this.files[0].size;
		}, false);
		
		
		//获取input file的文件地址处理兼容性问题
		　　function getObjectURL(file) {
			　　var url = null;
			　　if (window.createObjectURL != undefined) {//basic
			　　		url = window.createObjectURL(file);
			　　} else if (window.URL != undefined) {//mozilla(firefox)兼容火狐
			　　		url = window.URL.createObjectURL(file);
			　　} else if (window.webkitURL != undefined) {//webkit or chrome
			　　		url = window.webkitURL.createObjectURL(file);
			　　}
			　　return url;
		}
		function compress(res,fileSize) { //res代表上传的图片，fileSize大小图片的大小
		    var img = new Image(),
		        maxW = 640; //设置最大宽度			
				img.onload = function () {
		        var cvs = document.createElement('canvas'),
		            ctx = cvs.getContext( '2d');	
		        if(img.width > maxW) {
		            img.height *= maxW / img.width;
		            img.width = maxW;
		        }		
		        cvs.width = img.width;
		        cvs.height = img.height;		
		        ctx.clearRect(0, 0, cvs.width, cvs.height);
		        ctx.drawImage(img, 0, 0, img.width, img.height);		
		        var compressRate = getCompressRate(1,fileSize);		
		        var dataUrl = cvs.toDataURL( 'image/jpeg', compressRate);		
		        document.body.appendChild(cvs);
		        console.log(dataUrl);
		    }
		
		    img.src = res;
		}
		
		function getCompressRate(allowMaxSize,fileSize){ //计算压缩比率，size单位为MB
		      var compressRate = 1;	
		      if(fileSize/allowMaxSize > 4){
		           compressRate = 0.5;
		      } else if(fileSize/allowMaxSize >3){
		           compressRate = 0.6;
		      } else if(fileSize/allowMaxSize >2){
		           compressRate = 0.7;
		      } else if(fileSize > allowMaxSize){
		           compressRate = 0.8;
		      } else{
		           compressRate = 0.9;
		      }
		      return compressRate;
		}
	</script>

结果后台说要不点击的时候调用摄像头。
我就有了俩个思路：

我们模拟点击事件
我们通过自动拉取的方法实现
有点遗憾的是：自动拉取我目前没有想出来。所以我就只能通过JQ的模拟点击事件来模拟自动拉取的方式。不得不说JQ的确很强大。我查了资料之后。发现了一个方法tragger(),怎么用我就不说了，w3school比我讲的好。地址如下：
https://www.w3school.com.cn/jquery/event_trigger.asp

言归正传：
那我们就直接上代码：

function opencanmer(){
			$("#img").trigger('click')
		}

我们通过调取opencanmer（）方法实现自动拉取摄像头。

如果遇见了警告

在这里插入图片描述
那么恭喜你，换个方法吧。浏览器处于安全性问题，拦截了你的自动化操作。

做一个菜鸟从我做起~如果有其他方法欢迎留言评论。如果觉得好那就点个赞！蟹蟹

从19年开始写

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
（pc端和移动端）自动拉起摄像头不用点击事件，并且处理了兼容性问题

1. 首先我们肯定要先有一个可以点击的input<body> <div class = "wrapper"> <input type = "file" accept= "image/*" capture= "camera" id="img" /> <button class="button">上传照片 </button&g...
复制链接

扫一扫