针对 EXIF 数据旋转 HTML 画布图像

Question

因此，我制作了一个图像上传表单，该表单获取图像并添加叠加层。问题是，如果通过 iPhone 或 Android 手机上传图像，图像通常会因为 EXIF 数据而错误地旋转。我找到了一种将方向映射到数字（1-10）的方法，但是我在网上找到的用于旋转画布的代码似乎不起作用。任何帮助将不胜感激。

JSFiddle：https://jsfiddle.net/Hybridx24/Loycdyc9/2/

JS

function showimagepreview(input, ori) {
  if (input.files && input.files[0]) {
    var filerdr = new FileReader();

    filerdr.onload = function(e) {
      var img = new Image();

      img.onload = function() {
        var canvas = document.createElement('canvas'),
            ctx = canvas.getContext('2d'),
            ratio = img.height / img.width,
            maxRatio = 0.6666666666666667;


        var width = img.width,
            height = img.height;
        // transform context before drawing image
        switch (ori) {
          case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
          case 3: ctx.transform(-1, 0, 0, -1, width, height ); break;
          case 4: ctx.transform(1, 0, 0, -1, 0, height ); break;
          case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
          case 6: ctx.transform(0, 1, -1, 0, height , 0); break;
          case 7: ctx.transform(0, -1, -1, 0, height , width); break;
          case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
          default: ctx.transform(1, 0, 0, 1, 0, 0);
        }

        canvas.width = 640;
        canvas.height = 640;
        drawImageProp(ctx, img, 0, 0, canvas.width, canvas.height);  // Centers BG image (similar to background-position: cover)

        var img2 = new Image();

        img2.onload = function() {
            ctx.drawImage(img2, 0, 0, canvas.width, canvas.height);

            var data = canvas.toDataURL('image/png'),
                preview = document.getElementById('img-preview'),
                $img = $('<img id="new-img" src="' + data + '" />'),
                $downloadImg = $('#download-img'),
                $shareImg = $('#share-img');

            $img.css({'border-radius': '6px'})
            preview.innerHTML = '';
            $img.hide().appendTo(preview).fadeIn(500);
            $downloadImg.hide().appendTo(preview).fadeIn(500);
            $shareImg.hide().appendTo(preview).fadeIn(500);

            $.ajax({
              type: "POST",
              url: "http://data-uri-to-img-url.herokuapp.com/images.json",
              data: { 
                 "image[data_uri]": data.split(',')[1]  // ".split(',')[1]" Safely removes Base64 prefix for POST
              }
            }).done(function(response) {
              var url = response['url'],
                  fbUrl = "https://www.facebook.com/sharer/sharer.php?u=" + url;

              $shareImg.find('a').attr('href', fbUrl);
              console.log(url);
            });
        };
        img2.src = "http://i.imgur.com/xNpwbZj.png"
      }
      img.src = e.target.result;
    }
    filerdr.readAsDataURL(input.files[0]);
  }
}

Answer 1

另一种旋转画布的方法是使用 css transform，它会像这样旋转角度：

document.querySelector('canvas').style.transform = 'rotate(90deg)';

这样您就可以选择画布并垂直旋转它。现在你应该可以根据你得到的数字来旋转你的画布了。如果有帮助，请告诉我。