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

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

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

ЗагрузитеloadImage()функция

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)

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: