使用JavaScript将canvas内容下载到本地

这里主要通过a标签来下载canvas的内容，首先要通过toDataURL方法将canvas对象转换为base64位编码

---

toDataURL的用法

canvas.toDataURL(type, encoderOptions)需要两个参数，两个参数都是可选参数，有默认值

第一个参数type表示图片格式，默认为image/png

第二个参数encoderOptions在指定图片格式为 image/jpeg 或 image/webp的情况下用于选择图片的质量，可选范围在0到1之间，如果超出这个范围，默认使用0.92

该方法最后返回一个字符串

---

获得转换好的base64位编码后，就可以创建a标签来将图片下载到本地了，创建的a标签需要设置download属性和href属性

download属性（HTML5）：此属性会让浏览器下载其对应的内容而不是导航到该内容，如果添加值，则添加的值为下载后的内容的名字

---

设置好a标签后通过dispatchEvent来调用对该a标签的点击

dispatchEvent(event)方法传入一个event对象作为参数，会让调用该方法的元素执行event对象对应的事件处理

最后是完整的实现代码

let canvas = document.getElementById('canvas')
function restoreImg() {
    let name = prompt('请输入要保存的图片名称', 'canvas绘制图片') // 'canvas绘制图片'为图片默认名
    if (name === "") {
        alert('名字不能为空')
    } else {
        let href = canvas.toDataURL() // 获取canvas对应的base64编码
        let a = document.createElement('a') // 创建a标签
        a.download = name // 设置图片名字
        a.href = href
        a.dispatchEvent(new MouseEvent('click'))
    }
}

参考文档   MDNa标签的介绍

                 MDN toDataURL()方法的介绍

                 W3C dispatchEvent() 方法的介绍