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）兼容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
