0

Изображение имеет большие размеры ширина client_width>1920 и высота client_height>1080. А canvas - 1920x1080. Как с помощью javascript функции drawimage() перенести такое изображение полностью без обрезки на такой новый холст?

<canvas id="img" name="img"  width="1920" height="1080"></canvas>
<img id="duble_img" src="photo.jpg">

1 ответ 1

1

Метод drawImage() принимает параметры dWidth и dHeight. Они отвечают за размеры изображения на canvas.

Если ваще изображение имеет такое же соотношение сторон, как и canvas

let img = document.getElementById("duble_img");
canvas.drawImage(img, 0, 0, 1920, 1080);

Если соотношения сторон не совпадают, то нужно посчитать ширину или высоту, чтобы сохранить пропорции изображения

let img = document.getElementById("duble_img");
let ratio = img.clientWidth / img.clientHeight; //соотношение сторон img
let width = 1920;
let height = widht/ratio;
canvas.drawImage(img, 0, 0, width , height);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.