常见的电子商务网站有,重庆有名的网站建设,怎么做app软件开发,东莞住房和城乡建设厅官网需求很简单#xff1a;h5拍照上传照片#xff0c;然后显示出来问题在#xff1a;上传之后的图片在PC#xff0c;IOS端均能正常显示#xff0c;Android端显示的则是被旋转90度的。直接上代码下面这个方法传入file对象#xff0c;然后会去除掉照片中的exIf信息#xff0c;…需求很简单h5拍照上传照片然后显示出来问题在上传之后的图片在PCIOS端均能正常显示Android端显示的则是被旋转90度的。直接上代码下面这个方法传入file对象然后会去除掉照片中的exIf信息之后返回。用这个方法就可以保证PCIOS,Android端都显示正常的图片。function removePicExif(file){ return new Promise((reslove) { if (file) { let reader new FileReader(); let image new Image(); reader.onload function (ev){ image.src ev.target.result; image.onload function (){ const ctxWidth this.width; const ctxHeight this.height; const canvas document.createElement(canvas); const ctx canvas.getContext(2d); canvas.width ctxWidth; canvas.height ctxHeight; ctx.drawImage(this, 0, 0, ctxWidth, ctxHeight); canvas.toBlob((blob) { const newFile new File([blob], file.name, { type: image/jpeg, lastModified: Date.now(), }); reslove(newFile) }); }; }; reader.readAsDataURL(file); } }) }下面我来说下我的研究发现在手机垂直拍摄上传的图片会在Android中被旋转后查了很多资料大同小异就是获取到图片的EXIF信息然后利用canvas旋转到正确的方向。但是但是实际测试中我发现并不需要利用canvas再做旋转。大家可以拿出手机来拍摄一下在垂直竖拍情况下拍摄的图片正常。在垂直横拍的情况下其实拍摄的图片也是和垂直竖拍的方向一样的。在垂直的情况下你无论横排竖拍倒着拍拍出来的图片方向都是以竖拍方向来的并不会因为你是倒着拿手机手机拍出来的照片就是倒的这是垂直竖拍这是垂直横拍垂直情况下你怎么拿手机拍出来的方向都是一个所以其实手机端在拍摄的时候已经帮我们旋转到了合适的方向不需要我们再进行旋转了。但是照片信息依然保留了该照片的拍摄方向所以在Android上Android再一次根据拍摄方向自动做了旋转结果就是转过了导致Android的图片显示不对。所以我们要做的仅仅应该是取消EXIF信息而不是旋转。小彩蛋到这其实基本就结束了但是水平情况下呢手机拍照又是什么情况呢当你手机和地面平行拍摄地面你会发现拍出来的照片就是最初的样子横着拍照片就是横的竖着拍。照片就是竖的手机这是没有做处理你觉得是为什么呢文章来源: segmentfault.com作者barry版权归原作者所有如需转载请联系作者。原文链接segmentfault.com/a/1190000038283517
