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方法在第二個鏈接中。