繪制圖片
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 '微軟雅黑'" // 設(shè)置字號、字體
ctx.fillText(text, x, y)
導出Base64
const base64Img = canvas.toDataURL('image/png')
下載圖片
const a =?document.createElement('a')? // 生成一個a元素
const event = new MouseEvent('click') // 創(chuàng)建一個單擊事件
a.download = 'createForCanvas.png' // 設(shè)置圖片名稱
a.href = base64Img // 將生成的Base64設(shè)置為a.href屬性
?a.dispatchEvent(event) // 觸發(fā)a的單擊事件