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

这可能取决于您如何握住 phone。该（方向）信息存储在图像的 exif 数据中，您必须相应地旋转它。
JavaScript Load Image

是一个可以帮助您的图书馆

Answer 2

我从来没有尝试用 javascript 拍照，但我做了一些 ios 移动开发。

图片出现横着的原因是因为 Apple 认为握住您的 phone 并将主页按钮朝右是唯一可以接受的拍照方式。这也称为 'up' 状态。

有关您的 iPhone 侧身拍照的原因的更多信息，请参见此处：http://rotatemailer.com/sideways-pictures.html

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

Canvas 正在绘制旋转图像

Canvas is drawing a rotated image

javascript

camera

canvas

rotation

drawimage