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

kelen發表於2019-02-16
行程

在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>

相關文章