Как пропорционально изменить размер изображения в холсте?

AFAIK, чтобы изменить размер загруженного изображения в холсте HTML5, было бы выполнено следующим образом:

var img = new Image();
img.onload = function () {
  ctx.drawImage(img, 0, 0, 300, 200); // resizes image to 300px wide, 200px high
}
img.src = 'images/myimage.jpg';

Но потом я понял, что изображение не будет пропорционально правильным. Поэтому я попытался использовать только один параметр (как в HTML), но я обнаружил, что это тоже не сработало.

Как пропорционально изменить размер изображения?

Ответ 1

Получить img.width и img.height, а затем рассчитать пропорциональную высоту в соответствии с той шириной, которую вы определяете.

Например:

ctx.drawImage(img, 300, 0, 300, img.height * (300/img.width));

Ответ 2

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

Он был написан с учетом расположения div, но его можно было легко понять для холста.

В нижней части страницы находится функция "ScaleImage". Это может быть то, что вы хотите. Затем вы можете применить его следующим образом:

var img = new Image();
img.onload = function () {

  var result = ScaleImage(img.width, img.height, 300, 200, true);

  ctx.drawImage(img, result.targetleft, result.targettop, result.width, result.height); // resizes image to a target size of 300x200 using letterbox mode
}
img.src = 'images/myimage.jpg';

Вы можете заменить result.targetleft и result.targettop на "0", если вы не хотите, чтобы изображение центрировалось.