解決ios手機上傳豎拍照片旋轉90度的問題

html5+canvas進行移動端手機照片上傳時，發現ios手機上傳豎拍照片會逆時針旋轉90度，橫拍照片無此問題；Android手機沒這個問題。

所以解決這個問題的思路是：獲取到照片拍攝的方向角，對非橫拍的ios照片進行角度旋轉修正。

這裏主要利用exif.js讀取照片的拍攝信息。

Exif.js 提供了 JavaScript 讀取圖像的原始數據的功能擴展，例如：拍照方向、相機設備型號、拍攝時間、ISO 感光度、GPS 地理位置等數據。

EXIF 數據主要來自拍攝的照片，多用於移動端開發，PC 端也會用到，此插件兼容主流瀏覽器，IE10 如下不支持。

這裏主要用到Orientation屬性。

Orientation屬性說明以下：

在頁面中首先引入 exif.js

主要代碼以下：

//獲取照片的元信息（拍攝方向）
  function getPhotoOrientation(img) {
    var orient;
    EXIF.getData(img, function() {
      orient = EXIF.getTag(this, "Orientation");
    });
    return orient;
  }

 

 //獲取照片的拍攝方向
          var orient = getPhotoOrientation(image);
          //判斷圖片拍攝方向是否旋轉了90度
          if (orient == 6) {
            canvas.width = width * (image.height / image.width);
            canvas.height = width;
            drawer.save();
            drawer.translate(canvas.width / 2, canvas.height / 2);
            drawer.rotate(90 * Math.PI / 180); 
            drawer.drawImage(image, -(canvas.height / 2), -(canvas.width / 2), canvas.height, canvas.width);
            let newImg = canvas.toDataURL("image/jpeg", 1);
            $('.img2').attr("src", newImg);

經過讀取圖片的Orientation屬性，若是等於6，則讓它旋轉90度。

參考demo：http://jsfiddle.net/q3011893/k3z5ev26/embedded/

 

其它參考資料：

https://www.jb51.net/article/96539.htm