HTML Canvas JS - удалить черную рамку после поворота () - PullRequest
Новая
       15

HTML Canvas JS - удалить черную рамку после поворота ()

0 голосов
/ 05 марта 2019

Я создаю форму для загрузки фотографий прямо со смартфона.Поэтому я должен прочитать параметры EXIF ​​и повернуть изображение для правильного просмотра.Проблема в том, что когда я поворачиваю изображение, справа остается черная рамка (которая охватывает предыдущую ширину перед вращением).

Это мой код: 

var canvas = document.createElement('canvas');
canvas.width = tempW;
canvas.height = tempH;
var ctx = canvas.getContext("2d");
var exif = EXIF.readFromBinaryFile(base64ToArrayBuffer(reader.result));
var inizio_x = 0;
var inizio_y= 0;

switch(exif.Orientation){
        case 8:
          ctx.rotate(-90*Math.PI/180);
          inizio_x = -tempW;
          inizio_y = 0;     
        break;

        case 3:
           ctx.rotate(180*Math.PI/180);
           inizio_x = -tempW;
           inizio_y = -tempH;
        break;

        case 6:
           ctx.rotate(90*Math.PI/180);
           inizio_x = 0;
           inizio_y = -tempH;
        break;
    }

ctx.drawImage(this, inizio_x, inizio_y, tempW, tempH);

var dataURL = canvas.toDataURL("image/jpeg");

I 'Мы изменили исходные точки X и Y холста для подгонки повернутого изображения.

Важно: изображение НИКОГДА не квадратное, поэтому я не могу повернуть к центру.

Спасибо за любую помощь.

...