toDataURL 是 Canvas 2D 上下文方法，将画布内容编码为 Base64 Data URL；默认 PNG（保透明），支持 JPEG（需指定 MIME 类型及质量参数，不支持透明）；可直接用于 img 标签或下载。
toDataURL 是 Canvas 2D 上下文提供的方法，用于将当前画布内容编码为 Base64 格式的 Data URL 字符串，可直接用作图片地址或下载为文件。默认输出 PNG，但支持指定 MIME 类型导出 JPEG（需注意透明通道处理）。
基本用法：生成 Data URL
调用方式简单：
const canvas = document.getElementById('myCanvas');
const dataUrl = canvas.toDataURL(); // 默认 'image/png'
// 或指定格式
const pngUrl = canvas.toDataURL('image/png');
const jpgUrl = canvas.toDataURL('image/jpeg', 0.9); // 第二个参数是 JPEG 质量（0–1）
导出为 PNG：保留透明背景
PNG 支持 alpha 通道，适合有透明区域的绘图（如图标、带阴影的图形）：
- 无需额外参数，
toDataURL()默认就是 PNG - 确保 canvas 本身未被填充不透明底色（例如没执行
ctx.fillStyle = '#fff'; ctx.fillRect(0,0,w,h);），否则透明会丢失 - 生成的字符串以
data:image/png;base64,...开头，可直接赋给<img src="...">预览
导出为 JPEG：压缩更小，但不支持透明
JPEG 不支持透明，canvas 中透明像素会被渲染为黑色（或浏览器默认背景色）：
立即学习“前端免费学习笔记（深入）”；
- 必须显式传入
'image/jpeg'类型，否则即使后缀写 .jpg 也仍是 PNG - 第二个参数是质量值（0.0–1.0），推荐 0.8–0.9 平衡清晰度与体积
- 若想避免黑底，导出前手动填充白色背景：
ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, canvas.width, canvas.height);
再绘制你的内容
实际下载图片（非仅预览）
把 Data URL 转为可下载的链接：
function downloadCanvasAsImage(canvas, filename = 'canvas.png') {
const link = document.createElement('a');
link.download = filename;
link.href = canvas.toDataURL('image/png'); // 或 'image/jpeg'
link.click();
}
// 调用
downloadCanvasAsImage(myCanvas, 'chart.jpg');
注意：部分旧版 Safari 对 download 属性支持有限，可考虑用 saveAs（FileSaver.js）兼容。
