前言:为什么我们需要将image的onload加载事件变成同步请求呢?答案当然是图片加载完成后方便我们后续去做一些操作,不然我们想去做一些操作的时候,还需要到onload函数去操作。
一、通过Promise封装
// url 图片路径
loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image()
img.setAttribute('crossOrigin', 'anonymous')
img.src = url
img.onload = () => {
// 当图像加载完成后进行resolve
resolve(img)
}
img.onerror = () => {
reject(new Error('图像加载失败'))
}
})
}
二、通过async/await方式使用
async getCanvasToAuthImage() {
const canvas = document.getElementById('canvas-auth-box')
const ctx = canvas.getContext('2d')
// 调用封装好loadImage方法 这样就可以使用同步的方式去绘制canvas
const img = await this.loadImage(this.pic2)
canvas.width = img.width
canvas.height = img.height
ctx.drawImage(img, 0, 0)
ctx.fillStyle = '#1d2129'
ctx.font = 'normal 14px sans-serif'
ctx.fillText(`画图`, 100, 100)
}