Как вписать картинку в канвас, чтобы не было пустой области JavaScript?
Есть канвас размера 100х100 пикселей и картинка размера 100х80 пикселей. Если ее вставить в канвас, то снизу будет пустая область 100х20 пикселей.
А как сделать так, чтобы пустой области не было? То есть, чтобы картинка увеличилась и полностью заполнила канвас?
Есть object-fit: cover;, но он изменяет только само отображение картинки, но этого не достаточно, так как потом картинка внутри канваса будет скачиваться. object-fit: cover; в данном случае не подходит, потому что при скачивании он не будет учитываться и картинка скачается с пустой областью.
Ответы (1 шт):
Попробуй создать новое изображение из исходного (исходное можно скрыть, если его не нужно показывать, достаточно, чтобы оно было в DOM) с нужными размерами.
По поводу аргументов для new Image() можно прочитать здесь
В твоем случае если тебе нужно растянуть картинку по вертикали, то высчитай высоту канваса и высоту картинки и добавь к высоте новой картинки разницу
const newOne = new Image(200, 400);
newOne.src = document.querySelector('img').src;
document.querySelector('body').append(newOne);<img src="https://picsum.photos/200" alt="">