这里主要通过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标签的介绍