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

之前只有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调用系统摄像头拍照后返回的图片自动旋转的解决方案)