画布正在绘制一个旋转的图像

Question

我正在尝试使用JavaScript拍摄我的iPhone照片并将图像绘制到画布上。我使用的是：

<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 标签加载完成后，我还需要将其绘制到画布上：

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

但是我无法让它适配。

有人知道为什么画布会旋转绘制图像吗？非常感谢任何帮助使图片在画布上正确绘制的方法！

谢谢！

- GameDev Quest

Answer 1

这可能取决于您如何拿着手机。该（方向）信息存储在图像的exif数据中，您必须相应地旋转它。
可以帮助您完成此操作的一个库是JavaScript Load Image。

- VolkerK

---

就是它！Exif 数据！非常感谢。我可以使用 JavaScript Load Image 轻松旋转图像了。 - GameDev Quest

Answer 2

我从未尝试过使用JavaScript拍照，但我做一些iOS移动开发。

图片出现侧面的原因是因为苹果认为将手机的主页按钮朝右拿着是拍照的唯一可接受方式。这也被称为它的“上”状态。

关于为什么你的iPhone会侧着拍照的更多信息可以在这里找到：http://rotatemailer.com/sideways-pictures.html

在iOS中旋转非常容易，所以在JavaScript中我不太确定如何正确地做到这一点。

- Justin

---

谢谢提供信息！我尝试将主页按钮放在右边拍照，它的方向是正确的，但由于将其侧向压缩到画布中，因此缩放不正确。最终通过JavaScript Load Image的帮助解决了这个问题。 - GameDev Quest