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

但是我无法让它适应。

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

谢谢！

Answer 1

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

Answer 2

我从未试图用javascript拍照，但我做了一些ios移动开发。

图片横向出现的原因，是因为苹果认为拿着手机的主按钮朝右是唯一可以拍照的方式。这也被称为“上涨”。状态。

有关iPhone为何侧向拍照的详细信息，请访问：http://rotatemailer.com/sideways-pictures.html

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

画布正在绘制旋转图像

2 个答案: