使用Canvas+exif-js自动校正数码照片使用场景。用户在做朋友圈H5的时候，经常会遇到用户拍照上传图片的需求，但是在某些手机上（iso）拍摄的照片会呈现奇怪的旋转角度。经过各种百度，发现相机拍摄的照片有很多属性，其中之一就是Orientation，用来记录相机在拍摄时的物理旋转角度。例如，如果相机上下颠倒，则Orientation为3，如果顺时针旋转，则Orientation为6，反之则为逆时针。竖立时Orientation为8，普通模式下Orientation为1。根据这个属性我们可以使用Canvas重绘图片。定位示意图ShowCodeimportEXIFfrom'exif-js';//导入依赖插件//参数列表：img对象，回调返回Base64图片编码，生成图片质量默认值为0.9exportconstFixImg=(img,callback,quality=0.9)=>{letOrientation,ctxWidth,ctxHeight,base64;//定义所需变量EXIF.getData(img,function(){Orientation=EXIF.getTag(this,'Orientation');ctxWidth=this.naturalWidth;ctxHeight=this.naturalHeight;console.log(Orientation,ctxWidth,ctxHeight);varcanvas=document.createElement('canvas');varctx=canvas.getContext('2d');canvas.width=ctxWidth;canvas.height=ctxHeight;if([5,6,7,8].包括(Orientation)){canvas.width=ctxHeight;canvas.height=ctxWidth;}switch(Orientation){case2:ctx.transform(-1,0,0,1,ctxWidth,0);break;case3:ctx.transform(-1,0,0,-1,ctxWidth,ctxHeight);中断;案例4:ctx.transform(1,0,0,-1,0,ctxHeight);中断;案例5：ctx.transform(0,1,1,0,0,0);休息;案例6：ctx.transform(0,1,-1,0,ctxHeight,0);休息;案例7：ctx。变换(0,-1,-1,0,ctxHeight,ctxWidth);休息;情况8：ctx.transform(0,-1,1,0,0,ctxWidth);休息;默认值：ctx.transform(1,0,0,1,0,0);}ctx.drawImage(img,0,0,ctxWidth,ctxHeight);//默认输出jpeg，也可以读取原图格式，最后输出原图格式，搜索关键字：File.typebase64=canvas.toDataURL('image/jpeg',quality);回调（base64）；});};性感照作弊，在线修复：http://peichenhu.cn/demo/awesome/#/Exif相关补充：从图片的Exif信息中得到Orientation后，可以根据它自动旋转图片。canvas、filter、vml、css3都可以实现图片的旋转。参考文章：https://imququ.com/post/how-t...
