即不管你怎么拍，ios实际存的图片都是横着放的，因此需要用户自己手动去旋转。旋转的角度放在了exif的数据结构里面，把这个读出来就知道它的旋转角度了，用一个EXIF的库读取：
读取exif的信息
readImgFile: function(file, $img, $container){ EXIF.getData(file, function(){ var orientation = this.exifdata.Orientation, rotateDeg = 0; //如果不是ios拍的照片或者是横拍的，则不用处理，直接读取 if(typeof orientation === "undefined" || orientation === 1){ //原本的readImgFile，添加一个rotateDeg的参数 handler.doReadImgFile(file, $img, $container, rotateDeg); } //否则用canvas旋转一下 else{ rotateDeg = orientation === 6 ? 90*Math.PI/180 : orientation === 8 ? -90*Math.PI/180 : orientation === 3 ? 180*Math.PI/180 : 0; handler.doReadImgFile(file, $img, $container, rotateDeg); } }); } readImgFile:function(file,$img,$container){ EXIF.getData(file,function(){ varorientation=this.exifdata.Orientation, rotateDeg=0; //如果不是ios拍的照片或者是横拍的，则不用处理，直接读取 if(typeoforientation==="undefined"||orientation===1){ //原本的readImgFile，添加一个rotateDeg的参数 handler.doReadImgFile(file,$img,$container,rotateDeg); } //否则用canvas旋转一下 else{ rotateDeg=orientation===6?90*Math.PI/180: orientation===8?-90*Math.PI/180: orientation===3?180*Math.PI/180:0; handler.doReadImgFile(file,$img,$container,rotateDeg); } }); }
知道角度之后，就可以用canvas处理了，在下面的压缩图片进行说明，因为压缩也要用到canvas
2. 压缩图片
压缩图片可以借助canvas，canvas可以很方便地实现压缩，其原理是把一张图片画到一个小的画布，然后再把这个画布的内容导出base64，就能够拿到一张被压小的图片了：
//设定图片最大压缩宽度为1500px var maxWidth = 1500; var resultImg = handler.compress($img[0], maxWidth, file.type); //设定图片最大压缩宽度为1500px varmaxWidth=1500; varresultImg=handler.compress($img[0],maxWidth,file.type);
compress函数进行压缩，在这个函数里首先创建一个canvas对象，然后计算这个画布的大小：
compress: function(img, maxWidth, mimeType){ //创建一个canvas对象 var cvs = document.createElement('canvas'); var width = img.naturalWidth, height = img.naturalHeight, imgRatio = width / height; //如果图片维度超过了给定的maxWidth 1500， //为了保持图片宽高比，计算画布的大小 if(width > maxWidth){ width = maxWidth; height = width / imgRatio; } cvs.width = width; cvs.height = height; } compress:function(img,maxWidth,mimeType){ //创建一个canvas对象 varcvs=document.createElement('canvas'); varwidth=img.naturalWidth, height=img.naturalHeight, imgRatio=width/height; //如果图片维度超过了给定的maxWidth 1500， //为了保持图片宽高比，计算画布的大小 if(width>maxWidth){ width=maxWidth; height=width/imgRatio; } cvs.width=width; cvs.height=height; }
接下来把大的图片画到一个小的画布上，再导出：
//把大图片画到一个小画布 var ctx = cvs.getContext("2d").drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, width, height); //图片质量进行适当压缩 var quality = width >= 1500 ? 0.5 : width > 600 ? 0.6 : 1; //导出图片为base64 var newImageData = cvs.toDataURL(mimeType, quality); var resultImg = new Image(); resultImg.src = newImageData; return resultImg; //把大图片画到一个小画布 varctx=cvs.getContext("2d").drawImage(img,0,0,img.naturalWidth,img.naturalHeight,0,0,width,height); //图片质量进行适当压缩 varquality=width>=1500?0.5: width>600?0.6:1; //导出图片为base64 varnewImageData=cvs.toDataURL(mimeType,quality); varresultImg=newImage(); resultImg.src=newImageData; returnresultImg;
最后一行返回了一个被压缩过的小图片，就可对这个图片进行裁剪了。
在说明裁剪之前，由于第二点提到ios拍的照片需要旋转一下，在压缩的时候可以一起处理。也就是说，如果需要旋转的话，那么画在canvas上面就把它旋转好了：
var ctx = cvs.getContext("2d"); var destX = 0, destY = 0; if(rotateDeg){ ctx.translate(cvs.width / 2, cvs.height / 2); ctx.rotate(rotateDeg); destX = -width / 2, destY = -height / 2; } ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, destX, destY, width, height); varctx=cvs.getContext("2d"); vardestX=0, destY=0; if(rotateDeg){ ctx.translate(cvs.width/2,cvs.height/2); ctx.rotate(rotateDeg); destX=-width/2, destY=-height/2; } ctx.drawImage(img,0,0,img.naturalWidth,img.naturalHeight,destX,destY,width,height);
这样就解决了ios图片旋转的问题，得到一张旋转和压缩调节过的图片之后，再用它进行裁剪和编辑
3. 裁剪图片