可通过toDataURL()或toBlob()结合a标签download属性保存Canvas为本地图片，优先推荐toBlob+URL.createObjectURL方案以节省内存；需处理跨域图片授权、旧浏览器兼容及透明度自适应格式选择。
如果您使用HTML5的绘制图像后希望将其保存为本地图片文件，则可通过toDataURL()方法获取图像数据，再结合download属性触发下载。以下是实现此目标的多种方法：
一、使用a标签download属性配合toDataURL
该方法将Canvas内容转为Base64数据URL，并通过带有download属性的标签模拟点击下载，适用于现代浏览器（Chrome、Firefox、Edge 18+、Safari 10.1+）。
1、调用canvas.toDataURL("image/png")获取PNG格式的Base64字符串；
2、创建document.createElement("a")元素；
立即学习“前端免费学习笔记（深入）”；
3、将href属性设为上一步生成的data URL；
4、设置download属性值为期望的文件名，例如"my-canvas.png"；
5、调用a.click()触发下载。
二、使用a标签download属性配合toBlob和URL.createObjectURL
该方法先将Canvas导出为Blob对象，再通过URL.createObjectURL()生成临时URL，避免Base64编码带来的内存开销和长度限制，尤其适合大尺寸图像。
1、调用canvas.toBlob(callback, "image/jpeg", 0.9)生成JPEG Blob（支持质量参数）；
2、在回调函数中，使用URL.createObjectURL(blob)获取临时URL；
3、创建a元素并设置其href为该URL；
4、设置download属性为指定文件名，如"export.jpg"；
5、执行a.click()启动下载；
6、下载完成后，调用URL.revokeObjectURL(url)释放内存引用。
三、兼容不支持download属性的旧版浏览器（如IE11）
IE11不支持a.download，但可利用msSaveBlob或msSaveOrOpenBlob API实现保存功能，需进行浏览器特征检测。
1、检测window.navigator.msSaveBlob是否存在；
2、若存在，直接调用navigator.msSaveBlob(blob, "canvas-export.png")；
3、若不存在，回退至toDataURL + a.download方案；
4、对toDataURL结果过长（超过IE限制约32KB）的情况，可改用toBlob并配合msSaveBlob规避问题。
四、处理跨域图片导致toDataURL失败的问题
当Canvas中绘制了跨域图片且未设置crossOrigin="anonymous"时，调用toDataURL()或toBlob()会抛出SecurityError。必须确保图片资源允许跨域访问。
1、加载图片前，设置img.crossOrigin = "anonymous"；
2、确保图片服务器响应头包含Access-Control-Allow-Origin: *或明确允许当前源；
3、若图片来自第三方且无法配置CORS，可将图片代理至同源服务端接口后再加载；
4、验证是否成功：在img.onload中尝试canvas.getContext("2d").drawImage(img, 0, 0)后立即调用toDataURL()，不报错即表示跨域授权有效。
五、自动识别Canvas内容类型并选择最优导出格式
根据Canvas是否含透明区域动态选择PNG或JPEG输出，兼顾透明度支持与文件体积优化。
1、使用canvas.getContext("2d").getImageData(0, 0, 1, 1)采样左上角像素的alpha值；
2、遍历整个图像数据判断是否存在alpha
3、若存在透明像素，优先调用toBlob(callback, "image/png")；
4、若无透明像素，调用toBlob(callback, "image/jpeg", 0.92)以减小体积；
5、导出时统一使用URL.createObjectURL生成链接，避免Base64编码对高分辨率Canvas造成的性能下降。
