Холст рисует повернутое изображение

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

в ИО очень легко вращать его, так что в JavaScript я не слишком уверен, как правильно это сделать.