当前位置: 首页 > Web前端 > HTML5

输入上传照片旋转解决方法

时间:2023-04-05 13:23:12 HTML5

需求很简单:h5拍照上传照片,然后显示问题:上传的图片在PC和IOS都可以正常显示,但是安卓显示旋转了90度.直接上传代码到下面的方法中传入file对象,然后去掉照片中的exIf信息,然后返回。通过此方法可以保证PC、IOS、Android都显示正常的画面。functionremovePicExif(file){returnnewPromise((reslove)=>{if(file){letreader=newFileReader();letimage=newImage();reader.onload=function(ev){image.src=ev.target.result;image.onload=function(){constctxWidth=this.width;constctxHeight=this.height;constcanvas=document.createElement("canvas");constctx=canvas.getContext("2d");canvas.width=ctxWidth;canvas.height=ctxHeight;ctx.drawImage(this,0,0,ctxWidth,ctxHeight);canvas.toBlob((blob)=>{constnewFile=newFile([blob],file.name,{type:"image/jpeg",lastModified:Date.now(),});reslove(newFile)});};};reader.readAsDataURL(文件);}})}说一下我研究发现手机竖拍时上传的图片在Android中会旋转。然后用canvas旋转到正确的方向,但是在实际测试中,我发现没有必要再用canvas旋转。可以拿出手机拍照。在竖拍的情况下,拍出来的照片都是正常的。在竖拍横拍的情况下,其实拍出来的画面也和竖拍竖拍的方向一致。在垂直方向的情况下,无论你拍水平、垂直或倒置的照片,你拍摄的照片的方向都是垂直方向。不仅仅是因为你把手机倒过来,所以手机拍出来的照片就会倒过来,这是垂直竖拍,这是垂直横拍。在竖屏的情况下,无论怎么握手机,拍摄的方向都是一样的。所以,其实在拍摄的时候手机已经帮我们旋转到合适的方向了,不需要我们再做一遍。旋转完成。但照片信息中仍保留照片的拍摄方向。所以在安卓上,安卓又会自动根据拍摄方向进行旋转。因此,我们要做的是取消EXIF信息,而不是旋转它。小彩蛋,到这里基本就搞定了,但是手机横着拍照会怎么样呢?当你的手机平行于地面拍摄地面时,你会发现你拍的照片是原图,横拍的,照片是横拍的,竖拍的。照片是竖着的。手机还没有处理。你认为这是为什么?