之前只有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中图片压缩上传