移动端利用html5对照片处理的教程实例

来源：动视网责编：小采时间：2020-11-27 15:09:32

移动端利用html5对照片处理的教程实例

移动端利用html5对照片处理的教程实例:前一阵在公司用vue开发webapp，遇到一个用户拍照或者调用手机相册展示图片，然后上传服务器的需求，接触前端仅半年的我走上了一路踩坑的道路，下面我来说说我遇到的那些坑！各种坑汇总调取手机相册iOS到没什么问题，安卓手机好坑啊，网上搜了很多办法，要么就

推荐度：

点击下载本文 文档为doc格式

导读移动端利用html5对照片处理的教程实例:前一阵在公司用vue开发webapp，遇到一个用户拍照或者调用手机相册展示图片，然后上传服务器的需求，接触前端仅半年的我走上了一路踩坑的道路，下面我来说说我遇到的那些坑！各种坑汇总调取手机相册iOS到没什么问题，安卓手机好坑啊，网上搜了很多办法，要么就

前一阵在公司用vue开发webapp，遇到一个用户拍照或者调用手机相册展示图片，然后上传服务器的需求，接触前端仅半年的我走上了一路踩坑的道路，下面我来说说我遇到的那些坑！

各种坑汇总

调取手机相册
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视频教程