html5+canvas進(jìn)行移動端手機(jī)照片上傳時，發(fā)現(xiàn)ios手機(jī)上傳豎拍照片會逆時針旋轉(zhuǎn)90度，橫拍照片無此問題；Android手機(jī)沒這個問題。

因此解決這個問題的思路是：獲取到照片拍攝的方向角，對非橫拍的ios照片進(jìn)行角度旋轉(zhuǎn)修正。

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

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

EXIF 數(shù)據(jù)主要來自拍攝的照片，多用于移動端開發(fā)，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);
          //判斷圖片拍攝方向是否旋轉(zhuǎn)了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，則讓它旋轉(zhuǎn)90度。

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

更多詳細(xì)內(nèi)容請訪問https://www.cssge.com/

總結(jié)

以上是生活随笔為你收集整理的解决ios手机上传竖拍照片旋转90度问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。