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

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.

Причина, по которой изображение получается совсем не в том, что Apple считает, что удерживать телефон с кнопкой "домой" - это единственный приемлемый способ сделать снимок. Это также известно как состояние "вверх".

Дополнительную информацию о том, почему ваш iPhone делает снимки сбоку, можно найти здесь: http://rotatemailer.com/sideways-pictures.html

В ios его очень легко повернуть, поэтому в javascript я не слишком уверен, как это правильно сделать.