画布正在绘制旋转的图像答案

【问题标题】：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);

但我无法让它适合。

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

谢谢！

【问题讨论】：

标签： javascript canvas camera rotation drawimage

【解决方案1】：

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

【讨论】：

就是这样！ exif 数据！非常感谢。我可以使用 JavaScript Load Image 轻松旋转图像。

【解决方案2】：

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

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

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

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

【讨论】：

感谢您提供的信息！我尝试使用右侧的主页按钮拍摄照片，并且它的方向正确，但由于将其侧向挤压到画布中，缩放比例已关闭。最终在 JavaScript Load Image 的帮助下解决了这个问题