移动端部分安卓手机（三星，小米）竖拍上传图片预览的时候发生旋转问题

移动端web 页面通过 input type= file 拍照的时候，部分手机图片出现量旋转了90度的问题，出现问题的机型为小米和三星，手机竖着拍的时候出现这种旋转的问题，横拍出来的照片是正常的，结合网上的解决办法总结如下：

主要是用 Orientation 这个参数

这个参数并不是所有的图片都有，不过通过手机拍出来的图片都是带有这个参数的，

旋转角度	参数值
0	1
顺时针90	6
逆时针90	8
180	3

参数为1 的时候显示正常，有问题的机型是竖拍的时候参数为6，（在实测中发现iPhone 6s ios 9系统上发现也是竖排参数为6，但是该手机的预览结果是正常的，这个原因暂时没有深究还）

想要拿到 Orientation 这个参数，可以通过exif.js 库来获取，github地址为：https://github.com/exif-js/exif-js

由于项目是vue 所以就使用 yarn add exif-js --save 来安装

exif.js获取Orientation的代码为：

EXIF.getData(file, function() { var Orientation = EXIF.getTag(this, 'Orientation'); });

该项目要求上传的图片能实现预览压缩，因此使用fileReader.readAsDataURL(file)来实现，

旋转用的是canvas 的rotate()方法实现的，（将上传的图片先用canvas绘制下来，绘制的过程中将需要旋转的转过来，然后在转化成base64来预览，以及传参给后端）

ctx.rotate(angle),

rotate方法的参数为旋转弧度，需要将角度转化为弧度：degress * Math.PI / 180,

压缩：手机拍出来的照片太大，而且使用 base64 编码的照片会比原照片大，那么上传的时候进行压缩就非常有必要的。现在的手机像素这么高，拍出来的照片宽高都有几千像素，用 canvas 来渲染这照片的速度会相对比较慢。

因此第一步需要先对上传照片的宽高做限制，判断宽度或高度是否超出哪个范围，则等比压缩其宽高。

var ratio = width / height;
if(imgWidth > imgHeight && imgWidth > xx){
imgWidth = xx;
imgHeight = Math.ceil(xx / ratio);
}else if(imgWidth < imgHeight && imgHeight > yy){
imgWidth = Math.ceil(yy * ratio);
imgHeight = yy;
}

解下来就是通过 canvas.toDataURL() 方法来压缩照片质量

canvas.toDataURL("image/jpeg", 1);

toDataURL() 方法返回一个包含图片展示的 data URI 。使用两个参数，第一个参数为图片格式，默认为 image/png。第二个参数为压缩质量，在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。

附上VUE项目中的完整代码为：

 

　　

参考链接为：https://www.imweb.io/topic/59559c01ad7fa941029740aa

 

 

 

转载于:https://www.cnblogs.com/keleyz/p/10310391.html