手机端拍照和上传图片的解决方法该产品需要用户拍摄身份证和人像，然后后台php调用商业界面比较证件和人像的匹配度。方案一：使用上传插件web-upload将证书和人像分别上传到后台，然后返回图片地址，在前端显示。点击验证按钮，ajax会将返回的图片地址发送给后台，后台将地址转成base64，调用接口进行比对，返回结果。缺点：手机拍的图片太大。webupload压缩后，图片还是很大。上传一次耗时太长，最后调用接口比较耗时也很长。webupload的样式需要重新定义。webuploader-pick{display:inline-block;宽度：1.6rem；高度：1.6rem；位置：绝对；左：50%；顶部：50%；-webkit-transform:翻译(-50%,-50%);转换：翻译（-50%，-50%）；背景颜色：透明；}webupload的输入框没有办法限制用户只能调用camera。（webupload加载后会生成一个输入框，但是页面加载后无法在input中重新添加属性，只能在上传时获取）。方案二：使用原来的H5对象完成上传。用户点击输入按钮，调用FileReader对象生成文件。使用canvas压缩图片，使用context绘制显示。然后将base64编码的dataURL转成文件。使用FormData对象追加文件并将其发送到后台。后台接受$_FILES后转成base64发送给接口获取结果。缺点1.工艺稍复杂。2.兼容性问题。//扫描ID$('.input-card').on('change',function(){varoFReader=newFileReader();varcard_files=document.getElementById('card-file').files[0];oFReader.readAsDataURL(card_files);oFReader.onloadend=function(oFRevent){img=newImage();img.src=oFRevent.target.result;img.onload=function(){//获取照片信息等于6varphoto=getPhotoOrientation(img);//压缩图片varcompress_data=compress(img);//将图片url转为文件类型（直接base64总是太大传到后台）card_img_file=dataURLtoFile(compress_data,'img.png');$(".crad-img").attr('src',img.src);//$("#compress_card").attr('src',imgfile);}//如果太大就压缩}})//图像压缩函数compress(img){canvas.width=img.widthcanvas.height=img.height//使用画布绘制context.drawImage(img,0,0);//important//压缩原图质量为原图的0.2倍vardata=canvas.toDataURL('image/jpeg',0.1)//数据url格式返回数据}//base64转文件functiondataURLtoFile(dataurl,filename){vararr=dataurl.split(','),mime=arr[0].match(/:(.*?);/)[1],bstr=atob(arr[1]),n=bstr.length,u8arr=newUint8Array(n);while(n--){u8arr[n]=bstr.charCodeAt(n);}returnnewFile([u8arr],文件名,{type:mime});}//获取照片元信息（拍摄方向）functiongetPhotoOrientation(img){varorient;EXIF.getData(img,function(){orient=EXIF.getTag(this,'Orientation');});返回方向；}//确认验证$('#saveDate').on('click',function(){var_token=$('meta[name="csrf-token"]').attr('content');var格式数据a=新的FormData();formData.append("_token",_token);//附加令牌formData.append("order_room_id",order_room_id);//附加其他项目参数formData.append("face_img_file",face_img_file);//追加文件formData.append("card_img_file",card_img_file);msg=layer.open({type:2,content:'checking'});$.ajax({url:'/check-in/ajax-real',type:'post',data:formData,cache:false,processData:false,//必需参数contentType:false,//必需参数async:false,dataType:'json',成功:function(data){layer.close(msg);if(data.status=='success'){layer.open({content:data.msg,skin:'msg'，时间：2、end:function(layero,index){//跳转table页window.location.href="{{Route('check.table',['num'=>$total_num,'order_room_id'=>$order_room_id])}}";}});}else{layer.open({content:data.msg,skin:'msg',time:3});}}});})
