vue嵌入h5页面拍照获取照片旋转问题-蒲公英云

vue嵌入h5页面拍照获取照片旋转问题

在h5页面中经常会需要获取相册或者拍照上传照片，可以使用最简单的

<input type="file" name="photo" accept=".jpg,.png" multiple>

直接进行获取，当点击按钮时会让你进行选择是拍照还是文件选择，选择文件中的照片进行上传显示正常，但是当选择照片进行拍照时会出现拍摄的照片发生旋转问题，本来是只有ios才会出现该问题，好像是因为ios本身的摄像头就是横着的，但是在平时拍照查看相册时未发现该问题是因为ios对其进行过处理。但是现在发现在安卓端也会出现该问题，这就需要借助于第三方库exif-js。由于项目基于vue，所以对此库的导入安装如下：

npm install exif-js --save
import Exif from 'exif-js';

主要使用到exif中的Orientation参数，是个1-8之间的值，但是一般我们不会用到那么多情况，只需要考虑三种情况：3、6、8

参数 0行（未旋转上） 0列（未旋转左）旋转（方法很多）
1 上左 0°
2 上右水平翻转
3 下右 180°
4 下左垂直翻转
5 左上顺时针90°+水平翻转
6 右上顺时针90°
7 右下顺时针90°+垂直翻转
8 左下逆时针90°

具体实现效果可参考：https://www.jianshu.com/p/fa1549b1b5d2

https://www.jianshu.com/p/eaba1f2afa70

将第一个链接中的代码

b64toBlob(resultBase64, function (blob) {
                param.append('file', blob); // 通过append向form对象添加数据
                //调用接口上传图片
                return registerFace(param, config).then((res) => {
                  // 上传成功逻辑
                })
              });

换成：

const blobs = that.convertBase64UrlToBlob(resultBase64)
    that.uploadFile.push(blobs);
    const name = blobs.name;
    const timestamp = new Date().getTime();
    const storeAs = 'mall/wxmall/aftersale/' + timestamp + name; //  路径+时间戳+后缀名
    that.uploadUrls.push(storeAs);
    let reader = new FileReader();
    reader.readAsDataURL(blobs); //发起异步请求
    reader.onload = function() {
        //读取完成后，数据保存在对象的result属性中
        //console.log(this.result);
        that.localImgUrl.push(this.result);
    }