如何在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(),它會在加載圖片時返回一個Promise:

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

})

您還可以在異步函數中使用:

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

有了圖片後,請致電drawImage並將其與x,y,width和height參數一起傳遞:

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

免費下載我的JavaScript初學者手冊


更多js教程: