我正在尝试使用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);
但是我无法让它适配。
有人知道为什么画布会旋转绘制图像吗?非常感谢任何帮助使图片在画布上正确绘制的方法!
谢谢!