Canvas toDataURL() 默认导出 PNG，支持 JPEG（不透明，需设背景色）、WEBP（透明+压缩，需兼容性检测）；质量参数仅对 JPEG/WEBP 有效（0.0–1.0），IE 仅支持 PNG。
Canvas 的 toDataURL() 方法默认导出 PNG 格式，但支持 JPEG、WEBP（部分浏览器）等格式，关键在于正确传入 MIME 类型参数并注意质量控制。
支持的格式与 MIME 类型
调用 toDataURL(type, quality) 时，type 决定输出格式：
-
PNG（默认）：
"image/png"，无损、支持透明通道，无需额外参数 -
JPEG/JPG：
"image/jpeg"或"image/jpg"，不支持透明（透明区域渲染为黑色），可传入质量值（0.0–1.0） -
WEBP：
"image/webp"，支持透明和压缩，质量可控，但 Safari 旧版本、IE 不支持
JPEG 导出时的透明处理
Canvas 本身是 RGBA 画布，但 JPEG 不支持 alpha 通道。若未手动处理，透明区域会显示为黑色：
- 导出前可先用
ctx.fillStyle = "#ffffff"填满背景，再绘制内容 - 或创建临时 Canvas，先绘制纯色底，再将原 Canvas 内容
drawImage()过去 - 避免直接对含透明像素的 Canvas 调用
toDataURL("image/jpeg")而不做背景覆盖
质量参数（quality）的使用细节
仅对 "image/jpeg" 和 "image/webp" 生效，范围是 0.0（最低）到 1.0（最高），非数字会被忽略：
立即学习“前端免费学习笔记（深入）”；
-
canvas.toDataURL("image/jpeg", 0.9)→ 高质量 JPEG -
canvas.toDataURL("image/webp", 0.75)→ 中等压缩 WEBP - 省略 quality 或传非数值（如
1整数）时，部分浏览器可能使用默认质量（通常约 0.92）
兼容性与降级建议
并非所有格式在所有浏览器中可用：
- 用
canvas.toDataURL("image/webp")前，建议先检测：canvas.toDataURL("image/webp").indexOf("data:image/webp") === 0 - 不支持 WEBP 时，自动 fallback 到 JPEG 或 PNG
- IE 完全不支持
toDataURL("image/jpeg")（只认 PNG），需服务端转换或提示用户升级
