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

【学海皮卡】苹果手机照片旋转问题及解决方法

时间:2023-04-05 18:59:19 HTML5

【学海皮卡】是一个标签,用来记录自己在工作中遇到的问题,闲暇之余探究其原因和原理。2年前的项目,遇到上传图片的功能,于是使用标签上传图片。当我点击标签选择拍照的时候,发现出现的图片和拍出来的图片不一样,而且它的方向做了旋转,和拍出来的图片不一样。原因是照片生成的图片里面会有一个数据EXIF,就是偏转值,会影响到图片的方向,为什么会出现这个问题,就是你拍照的时候,你可能会用到手机的水平角度,导致陀螺仪自动水平转角度,也就是你说的90°。当然,如果你想拍桌子上的物品,又想用水平角度,只要你小心地将手机水平放置,陀螺仪是不会自动把画面转成水平的。但是,作为一项技术,不能强迫用户这样做,只能做相应的解决方案。当系统接收到一张图片时,首先要知道它是否在旋转。就是旋转了怎么改正。这是问题2的解决方案。关于问题1,这里有一段代码可以解决它:functiongetOrientation(file,callback){varreader=newFileReader();reader.onload=function(e){varview=newDataView(e.target.result);如果(view.getUint16(0,false)!=0xFFD8){返回回调(-2);}varlength=view.byteLength,offset=2;while(offset