Поворот изображения на холсте Javascript

У меня есть изображение с ориентацией exif на 6! Я масштабирую изображение на холсте (чтобы уменьшить пропорцию) следующим образом:

var width = $('#thumbnail').css('width')
    var heigth = $('#thumbnail').css('height')
    console.log(width);
    console.log(heigth);
    $('#thumbnail').css('height', width).css('width', heigth);
    ctx.clearRect(0,0,c.width,c.height);
    ctx.save();
    ctx.translate(0, c.width/2, c.height/2);
    ctx.rotate(90 * Math.PI/180);
    ctx.translate(c.width/2, c.height/2);

    ctx.drawImage(img,-img.width/2, -img.height/2);

    ctx.restore();

Размер холста - это размер изображения, уменьшенный на коэффициент. Но результат не ожидается. Изображение масштабируется до 200% (увеличение).

Если у вас нет решения в js, объясните мне, как я могу добавить exif на холст.

Спасибо!


javascript canvas html
person darkiron    schedule 15.12.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я изо всех сил старался понять ваш вопрос, темное железо, поэтому вот моя попытка ответить

jsFiddle: https://jsfiddle.net/20w7u4qc/

JavaScript

ctx.clearRect(0, 0, c.width, c.height);
ctx.save();
ctx.translate(c.width / 2, c.height / 2);
ctx.rotate(90 * Math.PI / 180);
ctx.translate(-c.width / 2, -c.height / 2);
ctx.drawImage(img, 0, 0);
ctx.restore();

Дайте мне знать, если это неправильно или если вы обновите свой вопрос, чтобы быть понятным :)

person Canvas    schedule 15.12.2015