javascript - Canvas 正在绘制旋转图像

Question

我正在尝试使用 javascript 用我的 iphone 拍照并将图像绘制到 Canvas 上。我用

<input type="file" capture="camera" accept="image/*" id="takePictureField">

 mobilePictureGet);

使用相机。一旦我选择了一张图片

document.getElementById("takePictureField").addEventListener('change', function(e) {
        if(e.target.files.length == 1 && e.target.files[0].type.indexOf("image/") == 0) {
          img.src = URL.createObjectURL(e.target.files[0]);
        }          
      }

这会触发，并且图像在标签中显示为我想要的方式。 (到目前为止一切顺利)，但是，当 img 标签加载时，我将其绘制到 Canvas 上:

img.onload = function() {
       ctx.drawImage(img, 0, 0, img.width,img.height);
      }

它似乎旋转了 -90 度。我试过了

var x = width / 2;
var y = height / 2;
var angleInRadians = Math.PI / 2;

ctx.translate(x, y);
ctx.rotate(angleInRadians);
ctx.drawImage(img, -width / 2, -height / 2, img.width, img.height);
ctx.rotate(-angleInRadians);
ctx.translate(-x, -y);

但我不能让它适合。

有谁知道为什么 Canvas 会绘制旋转的图像？非常感谢在 Canvas 上正确绘制图片的任何帮助!!

谢谢!

Answer 1

这可能取决于您如何握持手机。该(方向)信息存储在图像的 exif 数据中，您必须相应地旋转它。
可以帮助您解决此问题的一个库是 JavaScript Load Image