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

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

JSFiddle：

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]);
  }
}

函数showimagepreview（输入，ori）{
if（input.files&&input.files[0]）{
var filerdr=new FileReader（）；
filerdr.onload=函数（e）{
var img=新图像（）；
img.onload=函数（）{
var canvas=document.createElement（'canvas'），
ctx=canvas.getContext（'2d'），
比率=最小高度/最小宽度，
最大比率=0.6667；
变量宽度=img.width，
高度=img.高度；
//在绘制图像之前转换上下文
开关（ori）{
案例2:ctx.transform（-1,0,0,1，width，0）；break；
案例3:ctx.transform（-1，0，0，-1，宽度，高度）；break；
案例4:ctx.transform（1,0,0，-1,0，高度）；break；
案例5:ctx.transform（0,1,1,0,0,0）；break；
案例6:ctx.transform（0,1，-1,0，高度，0）；break；
案例7:ctx.transform（0，-1，-1,0，高度，宽度）；break；
案例8:ctx.transform（0，-1，1，0，0，宽度）；break；
默认值：ctx.transform（1,0,0,1,0,0）；
}
画布宽度=640；
canvas.height=640；
drawImageProp（ctx，img，0，0，canvas.width，canvas.height）；//居中BG图像（类似于背景位置：封面）
var img2=新图像（）；
img2.onload=函数（）{
ctx.drawImage（img2，0，0，canvas.width，canvas.height）；
var data=canvas.toDataURL（'image/png'），
preview=document.getElementById（'img-preview'），
$img=$（''），
$downloadImg=$（“#下载img”），
$shareImg=$（“#share img”）；
$img.css（{'border-radius'：'6px'}）
preview.innerHTML=''；
$img.hide（）.appendTo（预览）.fadeIn（500）；
$downloadImg.hide（）.appendTo（预览）.fadeIn（500）；
$shareImg.hide（）.appendTo（预览）.fadeIn（500）；
$.ajax({
类型：“POST”，
url:“http://data-uri-to-img-url.herokuapp.com/images.json",
数据：{
“image[data_uri]”：data.split（“，”）[1]/“.split（“，”）[1]”安全地删除POST的Base64前缀
}
}).完成（功能（响应）{
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]）；
}
}

旋转画布的另一种方法是使用css

transform

，它以如下方式旋转角度：

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

---

这样，您就可以选择画布并垂直旋转它。现在，您应该能够根据获得的数字旋转画布。让我知道它是否有用。

这只是表面上改变了图像-我需要它使用

ctx.transform（）

，这样我就可以保存/共享生成的图像。您是否尝试了

ctx.setTransform（）

方法而不是

ctx.transform（）

？我会继续努力的