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 通道。若未手动处理，透明区域会显示为黑色：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 导出前可先用 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），需服务端转换或提示用户升级

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！