drawImage - изменить размер и сохранить масштаб

Я пытаюсь изменить размер изображения с помощью drawImage, но сохраняю масштаб. у меня пока так...

window.onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 0, 0, 600, 428);
}
<p>Image to use:</p>
<img id="scream" width="400" height="300" src="http://lorempixel.com/1280/960/sports/" alt="The Scream">

<p>Canvas:</p>
<canvas id="myCanvas" width="428" height="600" style="border:2px solid black;">
Your browser does not support the HTML5 canvas tag.
</canvas>

Я пытаюсь заставить изображение заполнить контейнер, чтобы потерять пустое пространство внизу, если я укажу точные размеры, оно растянется.

У кого-нибудь есть пример, на который они могут указать мне?


javascript html css drawimage
person fightstarr20    schedule 20.09.2017    source источник
comment
ты имеешь в виду сохранить соотношение? Как в stackoverflow.com/questions/21961839/ или один из вариантов stackoverflow.com/questions/34428723?   -  person Kaiido    schedule 20.09.2017

Ответы (1)


arrow_upward
3
arrow_downward

Сначала нужно найти соотношения сторон изображения и холста. Это делается:

var canvasRatio = canvas.width / canvas.height,
    imgRatio = img.width / img.height,
    s = 1;

Если соотношение меньше 1, то это портрет, иначе, если оно равно или больше 1, это (считается) пейзаж.

Затем вам нужно сравнить эти отношения следующим образом:

//the image is »more portrait«
//to fully cover the canvas
//scale by width
if (imgRatio < canvasRatio) {
  s = canvas.width / img.width;

//image has the same, or a »more landscape«
//ratio than the canvas
//to cover scale by height
} else {
  s = canvas.height / img.height;
}

//scale the context
ctx.scale(s, s);
cts.drawImage(…);

ОБНОВЛЕНИЕ

Это еще короче (без соотношений, без if):

var s = Math.max(canvas.width/img.width, canvas.height/img.height);

чтобы соответствовать изображению, используйте Math.min.

person philipp    schedule 20.09.2017