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

╰+哭是因爲堅強的太久メ 2022-01-10 08:59 660阅读 0赞

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

直接进行获取，当点击按钮时会让你进行选择是拍照还是文件选择，选择文件中的照片进行上传显示正常，但是当选择照片进行拍照时会出现拍摄的照片发生旋转问题，本来是只有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_fa1549b1b5d2]

[https://www.jianshu.com/p/eaba1f2afa70][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方法在第二个链接中。

[https_www.jianshu.com_p_fa1549b1b5d2]: https://www.jianshu.com/p/fa1549b1b5d2
[https_www.jianshu.com_p_eaba1f2afa70]: https://www.jianshu.com/p/eaba1f2afa70