Canvas截图保存的核心是利用toDataURL()或toBlob()导出图像数据再触发下载：前者返回base64字符串，后者异步生成省内存的Blob；需通过a标签click触发下载，且须处理跨域图片的安全限制。
Canvas 截图保存的核心是利用 toDataURL() 或 toBlob() 方法将画布内容转为图片数据，再通过链接触发下载。
获取画布图像数据
Canvas 本身不直接生成文件，需先导出为 base64 字符串或 Blob 对象：
-
canvas.toDataURL('image/png')返回 PNG 格式的 base64 字符串（默认质量 0.92） -
canvas.toDataURL('image/jpeg', 0.8)可指定 JPEG 格式和压缩质量（0–1） -
canvas.toBlob(callback, 'image/png', 0.9)异步生成 Blob，更省内存，适合大画布
触发下载保存
拿到数据后，创建临时下载链接即可保存：
- 对 base64 数据：创建
a标签，设置href和download属性，再调用.click() - 对 Blob 数据：用
URL.createObjectURL(blob)生成临时 URL，同样赋给a.href - 注意：下载链接需在用户手势（如 click）中触发，否则部分浏览器会拦截
处理跨域图片问题
如果 Canvas 绘制了来自其他域名的图片（如 <img>），且未设置 crossOrigin="anonymous"，调用 toDataURL() 会抛出安全错误：
立即学习“Java免费学习笔记（深入）”；
- 加载图片时加上
img.crossOrigin = 'anonymous' - 确保服务端响应头包含
Access-Control-Allow-Origin - 若无法控制服务端，可考虑服务端代理或使用允许跨域的资源
完整示例代码
点击按钮保存当前 Canvas 为 PNG：
function saveCanvasAsPNG(canvas, filename = 'canvas.png') {
const link = document.createElement('a');
link.download = filename;
link.href = canvas.toDataURL('image/png');
link.click();
}
// 使用
document.getElementById('saveBtn').addEventListener('click', () => {
saveCanvasAsPNG(document.getElementById('myCanvas'));
});
不复杂但容易忽略
