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);
    }

其中convertBase64UrlToBlob方法在第二个链接中。