Canvas 绘制图片、文字、导出Base 64、下载生成的图片

绘制图片

const canvas = document.createElement('canvas')

const ctx = canvas.getContext('2d')

const img = new Image()

img.onload = () => {

    ctx.drawImage(img, x, y, width, height)

}

img.src = url

绘制文字

ctx.font = "14px '微软雅黑'" // 设置字号、字体

ctx.fillText(text, x, y)

导出Base64

const base64Img = canvas.toDataURL('image/png')

下载图片

const a = document.createElement('a')  // 生成一个a元素

const event = new MouseEvent('click') // 创建一个单击事件

a.download = 'createForCanvas.png' // 设置图片名称

a.href = base64Img // 将生成的Base64设置为a.href属性

 a.dispatchEvent(event) // 触发a的单击事件