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

Я пытаюсь использовать 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
person GameDev Quest    schedule 20.08.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вероятно, это зависит от того, как вы держите телефон. Эта информация (ориентация) хранится в данных exif изображения, и вы должны повернуть ее соответствующим образом.
Одна из библиотек, которая может помочь вам в этом, — это JavaScript Загрузить изображение

person VolkerK    schedule 20.08.2015
comment
Вот оно! Exif-данные! Большое спасибо. Я могу легко повернуть изображение, используя JavaScript Load Image. - person GameDev Quest; 21.08.2015

arrow_upward
0
arrow_downward

Я никогда не пробовал делать снимки с помощью javascript, но занимаюсь разработкой мобильных приложений для iOS.

Причина, по которой изображение вообще выходит боком, заключается в том, что Apple считает, что держать телефон с кнопкой «Домой», обращенной вправо, — это единственный приемлемый способ сделать снимок. Это также известно как «включенное» состояние.

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

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

person Justin    schedule 20.08.2015
comment
Благодарю вас за информацию! Я попытался сделать снимок с кнопкой «Домой» вправо, и он правильно сориентировался, но масштабирование было отключено из-за вдавливания его в холст сбоку. В итоге решил это с помощью JavaScript Load Image - person GameDev Quest; 21.08.2015