网页端h5调用系统摄像头拍照后返回的图片自动旋转的解决方案

作者: 萨尔王子 | 来源:发表于2018-04-25 19:11 被阅读0次

之前只有iOS的会出现这种情况，后来很多Android也出现了，那么原因是什么呢？

呃呃呃呃呃呃因为现在IPhone的摄像头就是横着的，手机里显示竖屏的原因是ios自己做了处理，他们可以根据图片的一个拍摄角度数值来判断横竖问题，但是这个数值在我们web端拿不到，所以这就要我们自己作处理

这里主要用到一个识别照片信息的插件叫exif.js

npm下可以直接

npm install exif-js --save

let Orientation;

//去获取拍照时的信息，解决拍出来的照片旋转问题

Exif.getData(file, function(){

Orientation = Exif.getTag(this, 'Orientation');

});

这里Orientation就获取到了照片的方向，是个1-8之间的值，但是一般我们不会用到那么多情况，只需要考虑三种情况：3--手机横拍，头朝右；6--手机竖拍，头朝上（就是正常拍摄）；8--手机竖拍，头朝下；

根据三种情况写三种switch，然后赋给canvas；具体代码见另一片文章关于vue中图片压缩上传

网友评论

本文标题：网页端h5调用系统摄像头拍照后返回的图片自动旋转的解决方案

本文链接：https://www.haomeiwen.com/subject/cjbylftx.html

网页端h5调用系统摄像头拍照后返回的图片自动旋转的解决方案