html5+canvas进行移动端手机照片上传时，发现ios手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题;Android手机没这个问题。
因此解决这个问题的思路是：获取到照片拍摄的方向角，对非横拍的ios照片进行角度旋转修正。
利用exif.js读取照片的拍摄信息，详见 http://code.ciaoca.com/javascript/exif-js/
这里主要用到Orientation属性。
Orientation属性说明如下：
旋转角度参数0°1顺时针90°6逆时针90°8180°3
<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/><title>图片上传</title><scripttype="text/javascript"src="js/jquery-1.8.3.js"></script><scripttype="text/javascript"src="js/uploadPicture/mobileBUGFix.mini.js"></script><scripttype="text/javascript"src="js/uploadPicture/uploadImage.js"></script><scripttype="text/javascript"src="js/exif.js"></script></head><body><divstyle="height:50px;line-height:50px;text-align:center;border-bottom:1pxsolid#171E28;">上传图片:<inputtype="file"accept="image/*"id="uploadImage"capture="camera"onchange="selectFileImage(this);"/></div><divstyle="margin-top:10px;"><imgalt="preview"src=""id="myImage"/></div></body></html>
自己写的js：
functionselectFileImage(fileObj){varfile=fileObj.files['0'];//图片方向角addedbylzkvarOrientation=null;if(file){console.log("正在上传,请稍后…");varrFilter=/^(image\\/jpeg|image\\/png)$/i;//检查图片格式if(!rFilter.test(file.type)){//showMyTips("请选择jpeg、png格式的图片",false);return;}//varURL=URL||webkitURL;//获取照片方向角属性，用户旋转控制EXIF.getData(file,function(){//alert(EXIF.pretty(this));EXIF.getAllTags(this);//alert(EXIF.getTag(this,'Orientation'));Orientation=EXIF.getTag(this,'Orientation');//return;});varoReader=newFileReader();oReader.onload=function(e){//varblob=URL.createObjectURL(file);//_compress(blob,file,basePath);varimage=newImage();image.src=e.target.result;image.onload=function(){varexpectWidth=this.naturalWidth;varexpectHeight=this.naturalHeight;if(this.naturalWidth>this.naturalHeight&&this.naturalWidth>800){expectWidth=800;expectHeight=expectWidth*this.naturalHeight/this.naturalWidth;}elseif(this.naturalHeight>this.naturalWidth&&this.naturalHeight>1200){expectHeight=1200;expectWidth=expectHeight*this.naturalWidth/this.naturalHeight;}alert(expectWidth+','+expectHeight);varcanvas=document.createElement("canvas");varctx=canvas.getContext("2d");canvas.width=expectWidth;canvas.height=expectHeight;ctx.drawImage(this,0,0,expectWidth,expectHeight);alert(canvas.width+','+canvas.height);varbase64=null;varmpImg=newMegaPixImage(image);mpImg.render(canvas,{maxWidth:800,maxHeight:1200,quality:0.8,orientation:Orientation});base64=canvas.toDataURL("image/jpeg",0.8);//uploadImage(base64);$("#myImage").attr("src",base64);};};oReader.readAsDataURL(file);}}
用到的第三方js文件：mobileBUGFix.mini.js
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/27196.html；
