画布正在绘制旋转的图像

Posted 2023-02-25

技术标签:

【中文标题】画布正在绘制旋转的图像【英文标题】：Canvas is drawing a rotated image 【发布时间】：2015-08-20 19:23:59 【问题描述】：

我正在尝试使用 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);

但我无法让它适合。

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

谢谢！

【问题讨论】：

【参考方案1】：

这可能取决于您拿手机的方式。该（方向）信息存储在图像的 exif 数据中，您必须相应地对其进行旋转。一个可以帮助你的图书馆是JavaScript Load Image

【讨论】：

就是这样！ exif 数据！非常感谢。我可以使用 JavaScript Load Image 轻松旋转图像。【参考方案2】：

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

之所以会出现侧边的照片，是因为苹果认为握住手机时 Home 键朝右是唯一可接受的拍照方式。这也称为“启动”状态。

有关您的 iPhone 为何横向拍照的更多信息，请参见此处：http://rotatemailer.com/sideways-pictures.html

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