HTML5实习手机端浏览器拍照和本地上传

开题

上两张效果图，满足一下眼界~~效果是在同局域网下手机上模拟，该程序暂不支持PC端读取摄像头！

前端代码

                <div class="idnojust"><div class="just">证件照正面<span class="show" style="color:red;vertical-align:middle;padding-top:5px;">*</span></div><img  src="<%=basePath%>share/img/idnoversa.png" height="300"><input type="file"  accept="image/*"    class="img-idnoversa-upload file-input"><input type="hidden"  name="front" /><p id="frontthumbText"></p></div><div class="idnojust"><div class="just">证件照反面<span class="show" style="color:red;vertical-align:middle;padding-top:5px;">*</span></div><img src="<%=basePath%>share/img/idnojuast.png" height="300"><input type="file"  accept="image/*"   class="img-idnojuast-upload file-input"><input type="hidden"  name="back" /><p id="backthumbText"></p></div><div class="idnojust"><div class="just">手持证件照<span class="show" style="color:red;vertical-align:middle;padding-top:5px;">*</span></div><img src="<%=basePath%>share/img/idnohand.png" height="300"><input type="file"  accept="image/*"   class="img-idnohand-upload file-input"><input type="hidden"  name="hand" /><p id="handthumbText"></p></div><div class="idnorule"><p>手持照必须：</p><p>1、面部清晰可见，无遮挡，无妆容</p><p>2、完整露出双手双臂</p><p>3、证件照片及证件号清晰可见</p></div>

证件默认图：

样式：

把input框设置无色，切在覆盖图片上方，这样点击默认图实现触发上传

<style>.file-input{position: absolute;opacity: 0;/* margin-top: -0.8rem; */width: 90%;height: 7.12rem;
}</style>

核心JS代码：

单独引入html中

;(function(window){var imgUpload = {};/*** from https://my.oschina.net/zyxchuxin/blog/700381*/imgUpload.readURL = function (input) {console.log("loading start")var _this = this;if (input.files && input.files[0]) {this.getOrientation(input.files[0], function(orientation) {var reader = new FileReader();var fileSize = Math.round(input.files[0].size / 1024 / 1024) ; //以M为单位（把字节转换为M）//input.files[0] 该信息包含：图片的大小，以byte计算 获取size的方法如下：input.files[0].size;reader.onload = function (e) {//调用图片压缩方法：compress();_this.compress(e.target.result,fileSize,input,orientation);};reader.readAsDataURL(input.files[0]);});}}/*** res代表上传的图片，fileSize大小图片的大小* from https://juejin.im/post/5baf4a04e51d450ea52fd9a4#heading-0*/imgUpload.compress = function(res,fileSize,obj,orientation) { var _this = this;var img = new Image(),maxW = 640; //设置最大宽度img.src = res;img.onload = function () {var canvas = document.createElement( 'canvas')var ctx = canvas.getContext( '2d');// 限制图片的宽度if(img.width > maxW) {img.height *= maxW / img.width;img.width = maxW;}switch (orientation) {case 3: // 旋转180°canvas.width = img.width;canvas.height = img.height;ctx.rotate((180 * Math.PI) / 180);ctx.drawImage(img, -img.width, -img.height, img.width, img.height);break;case 6: // 旋转90°canvas.width = img.height;canvas.height = img.width;ctx.rotate((90 * Math.PI) / 180);ctx.drawImage(img, 0, -img.height, img.width, img.height);break;case 8: // 旋转-90°canvas.width = img.height;canvas.height = img.width;ctx.rotate((-90 * Math.PI) / 180);ctx.drawImage(img, -img.width, 0, img.width, img.height);break;default: //正常值canvas.width = img.width;canvas.height = img.height;ctx.drawImage(img, 0, 0, img.width, img.height);}var compressRate = _this.getCompressRate(1,fileSize);var dataUrl = canvas.toDataURL( 'image/png', compressRate);// 优化图片铺满容器if(img.height / img.width < 0.5){obj.previousElementSibling.style.width = '90%';}else{obj.previousElementSibling.style.width = '90%';}// 解决第二次选择相同文件不触发change事件obj.value = null;obj.previousElementSibling.setAttribute('src',dataUrl);console.log("dataUrl",dataUrl)dataURLtoFile(dataUrl,obj)}}/*** 计算压缩比率，size单位为MB*/imgUpload.getCompressRate = function (allowMaxSize,fileSize){ 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;}/*** from http://stackoverflow.com/a/32490603* from https://github.com/majiang666/ImageFile/blob/master/src/index.js* 获取照片方向，主要是为了解决IOS和部分三星手机会出现此bug，照片方向的问题*/ imgUpload.getOrientation = function getOrientation(file, callback) {var reader = new FileReader();reader.onload = function(e) {var view = new DataView(e.target.result);if (view.getUint16(0, false) != 0xFFD8){return callback(-2);}var length = view.byteLength, offset = 2;while (offset < length) {if (view.getUint16(offset+2, false) <= 8) return callback(-1);var marker = view.getUint16(offset, false);offset += 2;if (marker == 0xFFE1) {if (view.getUint32(offset += 2, false) != 0x45786966) {return callback(-1);}var little = view.getUint16(offset += 6, false) == 0x4949;offset += view.getUint32(offset + 4, little);var tags = view.getUint16(offset, little);offset += 2;for (var i = 0; i < tags; i++){if (view.getUint16(offset + (i * 12), little) == 0x0112){return callback(view.getUint16(offset + (i * 12) + 8, little));}}}else if ((marker & 0xFF00) != 0xFF00){break;}else{ offset += view.getUint16(offset, false);}}return callback(-1);};reader.readAsArrayBuffer(file);}window.imgUpload = imgUpload;})(window);

JS逻辑代码：


$(function(){//拍照正面上传$(".img-idnoversa-upload").change(function () {var img =  imgUpload.readURL(this);});//拍照反面上传$(".img-idnojuast-upload").change(function () {imgUpload.readURL(this);});//拍照手持上传$(".img-idnohand-upload").change(function () {imgUpload.readURL(this);});
});//将base64转换为文件对象function dataURLtoFile(dataurl, address) {var arr = dataurl.split(',');var mime = arr[0].match(/:(.*?);/)[1];var bstr = atob(arr[1]);var n = bstr.length; var u8arr = new Uint8Array(n);while(n--){u8arr[n] = bstr.charCodeAt(n);}//转换成file对象var file = new File([u8arr], '2021.png', {type:mime});//转换成成blob对象//return new Blob([u8arr],{type:mime});var formdata=new FormData();formdata.append('Filedata',file);formdata.append('fileType','images');$.ajax({url:'<%=basePath%>file/uploadPic',type:'post',contentType:false,data:formdata,processData:false,success:function(info){    console.log(info)address.previousElementSibling.setAttribute('src',info.path);address.nextElementSibling.setAttribute('value',info.path);},error:function(err){console.log(err)}});}

执行效果：

HTML5实习手机端浏览器拍照和本地上传相关推荐

php html5手机端多张图片上传,php+html5兼容手机端的图片选取裁剪上传实例
网上大多图片上传插件都不带裁剪功能,这个是php+html5实现的兼容手机端的图片选取裁剪上传实例,分享出来希望能帮到大家. 首先放置一个上传按钮及相关预览信息等注意:上传前,先截图文件大小类型 ...
html5 video 手机端视频播放全屏显示
html5 video 手机端全屏显示废话不多说上代码 html video <video preload='auto' id='my-video' src='xxxxx.xx' webk ...
JS判断是PC浏览器还是手机端浏览器
JS判断是电脑浏览器还是手机端浏览器,并根据不同的终端跳转到不同的网址 <!DOCTYPE html> <html> <script> function brows ...
通过UA区分微信PC端浏览器还是手机端浏览器
有时候需要限制用户访问页面在手机端, PC端不允许访问, 但是只做微信浏览器判断是不够的, 这个时候需要进一步判断. 通过tcpdump捉到两种浏览器的区分. PC端: 微信浏览器的UA标识 [Mic ...
html5写手机端页面
众位大神,有没有使用html5,以Bootstrap框架为核心来写手机端页面的资料?希望得到大家帮助!!! 欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器所展示的欢 ...
百度地图手机端浏览器对点击事件不灵敏
在调用百度地图API做开发的时候,有时需要在地图上添加点击事件,点击地图上某一点触发某个动作. 在web端,点击事件用map.addEventListener("click,function ...
php安卓浏览器调用相机拍照,好用的pc端web端手机端浏览器调用摄像头拍照JavaScript...
亲测可用: 摄像头拍照拍照下载拍照图片 //访问用户媒体设备的兼容方法 function getUserMedia(constraints, success, error) { if (navig ...
h5手机端浏览器机制_H5测试介绍
优势: 1.H5可以跨平台,开发成本相对较低: 2.H5可随时上限就更新版本,适合快速迭代: 3.H5可以轻量的触达用户,提供更快捷的服务: 4.在微信入口或者浏览器上,用户只需点开链接就可以获取我们 ...
h5手机端浏览器机制_H5 浏览器的9种缓存机制
前言打开浏览器的Application面板,可看到HTTP文件缓存(Frames下),Local Storage,Session Storage,indexDB,Web SQL,Cookie,Cac ...
手机html5卡,手机端js和html5刮刮卡效果
H5的Canvas实现刮刮卡效果. 刮开之后是随机生成的8位码. IE8不行... HTML5 刮刮卡 .demo{width:320px; margin:10px auto 20px auto; m ...

HTML5实习手机端浏览器拍照和本地上传

开题

前端代码

HTML5实习手机端浏览器拍照和本地上传相关推荐

最新文章

热门文章