时间:2021-07-01 10:21:17 帮助过:31人阅读
调取手机相册
iOS到没什么问题,安卓手机好坑啊,网上搜了很多办法,要么就是有的手机不管用,要么就是只能调相册不能调相机,要么就是只能调相机不能调相册
调取相册拿到相片后渲染到界面上,iOS又出了问题,通过相机拍摄的图片是旋转过90度的,或者苹果里面正常的图片到了安卓机展示是旋转90的,也有的图片苹果上正常在后台是歪的。身为一个iOS开发出身的我这就不理解了,经过几番查证,得出一个结论,苹果的相机是歪的!
图片渲染过后浏览器会崩溃,尤其是在微信,不得不说,微信好坑啊,什么东西到微信上就会出现各种问题!
然后是图片上传的问题,一开始采用了文件上传的形式,后来结果测试反馈,很多安卓机不能上传成功!说多了都是泪,不多说进正题!
总结一下我的解决办法,希望能对跟我一样还是个小白的人有所帮助
采用h5调取相册 虽然是一句话从网页调取,但是如果想相册,相机都调的话 要这么写 (我真的是查了好久)
<form id="uploadForm" enctype="multipart/form-data"> <input class="upload-open-photo" accept="image/*" type="file" id="filechooser" v-on:change="btnUploadFile($event)"/> </form>
图片渲染我采用了canvas ,利用了一个叫 exif.js的插件获取一下手机拍摄的方向(也就是拍照时是竖着拿手机还是横着,),然后判断下设备,对iOS设备的三个方向对图片进行旋转,利用canvas画到画布上
btnUploadFile(e){ //获取图片 var self = this; var filechooser = document.getElementById('filechooser'); var previewer = document.getElementById('previewer'); var that = e.target; var files = that.files; var file = files[0]; //判断拍摄方向, EXIF.getData(file,function(){ self.orientation=EXIF.getTag(this,'Orientation'); }); self.fileData = file; // 接受 jpeg, jpg, png 类型的图片 if (!/\/(?:jpeg|jpg|png)/i.test(file.type)){ return; } var reader = new FileReader(); reader.onload = function() { var result = this.result; var img = new Image(); //进行图片的渲染 img.onload = function() { //图片旋转压缩处理后的base64 var compressedDataUrl =self.compress(img,self.fileData.type); //渲染到img标签上 self.toPreviewer(compressedDataUrl); img = null; }; img.src = result; }; reader.readAsDataURL(self.fileData); },
图片渲染时不但要把图片旋转,还要进行压缩,由于现在相机像素太高,高清图片会导致浏览器崩溃,当然如果是做的微信开发,只需要在微信浏览器中适配,那么可以参考微信jssdk中的调用相册的方法,这样就不会有图歪和崩溃的问题了。当然如果不是只做微信,我们还是要进行压缩,同样是采用canvas
(mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html )
//对图片进行旋转,压缩的方法,最终返回base64 渲染给img标签的src compress(img, fileType) { var degree=0,drawWidth,drawHeight,width,height; drawWidth=img.width; drawHeight=img.height; //以下改变一下图片大小 var maxSide = Math.max(drawWidth, drawHeight); if (maxSide > 1024) { var minSide = Math.min(drawWidth, drawHeight); minSide = minSide / maxSide * 1024; maxSide = 1024; if (drawWidth > drawHeight) { drawWidth = maxSide; drawHeight = minSide; } else { drawWidth = minSide; drawHeight = maxSide; } } var canvas=document.createElement('canvas'); canvas.width=width=drawWidth; canvas.height=height=drawHeight; var context=canvas.getContext('2d'); //判断图片方向,重置canvas大小,确定旋转角度,iphone默认的是home键在右方的横屏拍摄方式 if($.device.ios){ switch(this.orientation){ //iphone横屏拍摄,此时home键在左侧 case 3: degree=180; drawWidth=-width; drawHeight=-height; break; //iphone竖屏拍摄,此时home键在下方(正常拿手机的方向) case 6: canvas.width=height; canvas.height=width; degree=90; drawWidth=width; drawHeight=-height; break; //iphone竖屏拍摄,此时home键在上方 case 8: canvas.width=height; canvas.height=width; degree=270; drawWidth=-width; drawHeight=height; break; } } //使用canvas旋转校正 context.rotate(degree*Math.PI/180); context.drawImage(img,0,0,drawWidth,drawHeight); // 压缩0.5就是压缩百分之50 var base64data = canvas.toDataURL(fileType, 0.5); canvas = context = null; this.urlbase = base64data; return base64data; },
最终拿到base64渲染给img标签的src
toPreviewer(dataUrl) { previewer.src = dataUrl; },
上面拿到了base64 后台提供一个base64上传图片的接口,base64有个好处是我们获取到的base64 是进行旋转压缩后图片的base64,这样我们上传服务器,或从别的地方展示这个图片都是旋转压缩后的,如果其他页面要展示这张图片,就省去了旋转压缩的过程!其实我现在也不知道为什么通过传文件方式传图片有的安卓机不行,不过改base64上传方式成功后就业没在纠结。
感觉踩了不少坑,归根结底还是自己前端经验不足啊!
【相关推荐】
1. 免费h5在线视频教程
2. HTML5 完整版手册
3. php.cn原创html5视频教程
以上就是移动端利用html5对照片处理的教程实例的详细内容,更多请关注Gxl网其它相关文章!