/**********************************************************/

function downloadIamge(canvasName, name) {     let image = new Image();     image.setAttribute('crossOrigin', 'anonymous');// 解决跨域 Canvas 污染问题     let canvas = document.getElementById(canvasName);     let url = canvas.toDataURL('image/png')     image.src = url;     let a = document.createElement('a');// 生成一个a元素     a.download = name || '下载图片名称' // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称     a.href = url;// 将生成的URL设置为a.href属性     a.dispatchEvent(new MouseEvent('click'));// 触发a的单击事件 } /**********************************************************/

// 调用方式 参数一： 选择器，canvase名称   参数二： 图片名称，可选 downloadIamge('canvas', '图片名称')；//单一图      /***下载界面中多个 canvas 中的内容  参数可不传 ***/      function downloadIamge(canvasName, name) {     let arr = document.getElementsByTagName("canvas");     for(let ca of arr){         let image = new Image();         image.setAttribute('crossOrigin', 'anonymous');// 解决跨域 Canvas 污染问题         let canvas = ca;         let url = canvas.toDataURL('image/png')         image.src = url;         let a = document.createElement('a');// 生成一个a元素         a.download = name || '下载图片名称' // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称         a.href = url;// 将生成的URL设置为a.href属性         a.dispatchEvent(new MouseEvent('click'));// 触发a的单击事件     } }

// 调用方式 参数一：默认即可，不使用 参数二： 图片名称，可选 //downloadIamge('canvas', '图片名称')；//单一     

部分借鉴 https://www.cnblogs.com/zhangkaiqiang/p/8183926.html

扩展了一下功能