Как загрузить изображение в HTML-холст

Я использовал пакет canvas npm для рисования изображения на стороне сервера с помощью API Canvas.

Примечание: вот как работать с изображениями на холсте в Node.js, а не в браузере. В браузере все по-другому.

Загрузить загрузить изображение() функция

const { createCanvas, loadImage } = require('canvas')

Создайте холст:

const width = 1200
const height = 630

const canvas = createCanvas(width, height)
const context = canvas.getContext('2d')

Затем вызовите LoadImage() , который возвращает обещание при загрузке изображения:

loadImage('./logo.png').then(image => {

})

Вы также можете использовать внутри асинхронной функции:

const image = await loadImage('./logo.png')

Как только у вас будет изображение, вызовите drawImage и передайте его с параметрами x, y, ширины и высоты:

context.drawImage(image, 340, 515, 70, 70)

Оригинал: “https://flaviocopes.com/how-to-load-image-html-canvas/”