如何在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教程: