一行代碼實現移動端拍照旋轉、壓縮問題

在h5頭像拍照上傳的時候，ios瀏覽器會逆時針旋轉90度，致使上傳的效果不如預期。

如何解決

通過網上查找得知能夠用 extjs 來獲取圖片的元數據，經過 orientation 屬性來判斷拍照的圖片是否被旋轉了

經過上圖能夠看出，在 orientation = 6 的狀況下表明圖片被逆時針旋轉了 90 度，因此只須要針對這種狀況對圖片作相應的旋轉便可

Exif.getData(file, function(){
  let Orientation = Exif.getTag(this, 'Orientation');
  if (Orientation === 6) {
      // 旋轉圖片
  }
});
複製代碼

因爲 exif 只提供判斷圖片角度，咱們還須要對圖片進行旋轉等等操做，實在是很麻煩，因而我封裝了一個工具類 ImageFile 來更加方便獲取拍照後的二進制文件，並且能夠經過參數配置圖片大小，不小再寫額外的代碼壓縮。

ImageFile獲取拍照文件

<input type="file" accept="image/*" onchange="fileChange(event)">
<script src="../dist/imageFile.umd.js"></script>
<script> function fileChange(ev) { let file = ev.target.files[0]; ImageFile.getImageFileData(file, { width: 300, height: 400, cover: false }).then(blob => { // 上傳圖片 let fd = new FormData(); fd.append('file', blob); // ajax上傳 }); } </script>
複製代碼