canvas 的 todataurl() 方法仅生成图片数据 uri，需结合 标签 download 属性模拟点击实现下载；支持 png/jpeg 格式，注意跨域、浏览器兼容性（ie/safari 限制）、文件大小及高清屏缩放问题。
Canvas 的 toDataURL() 方法本身不直接触发下载，它只生成图片数据 URI（如 data:image/png;base64,...）。要实现“一键下载”，需配合 <a></a> 标签的 download 属性，将数据 URI 作为链接地址并模拟点击。
1. 基础导出 PNG 图片
确保 Canvas 已绘制内容，调用 toDataURL() 获取 base64 编码的 PNG 数据，再创建临时链接下载：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 默认输出 PNG：无需参数，
canvas.toDataURL() - 指定 MIME 类型：如
canvas.toDataURL('image/jpeg', 0.9)（JPEG 需注意浏览器兼容性及透明背景会变黑） - 注意：若 Canvas 内容来自跨域图片且未设置
crossOrigin="anonymous"，调用会抛错或返回空字符串
2. 创建可下载的临时链接
不能直接用 window.location.href = dataUrl（部分浏览器会打开而非下载），正确做法是：
- 创建
<a></a>元素，设置href为 data URL，download属性指定文件名（如"my-drawing.png"） - 将该链接添加到
document.body（或任意父容器） - 调用
link.click()模拟点击 - 立即移除该链接（避免 DOM 泄漏）
3. 完整一键下载函数示例
可封装为复用函数，支持自定义格式和文件名：
function downloadCanvasAsImage(canvas, filename = 'canvas.png', type = 'image/png') {
const dataUrl = canvas.toDataURL(type);
const link = document.createElement('a');
link.href = dataUrl;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
// 使用示例（绑定到按钮）
document.getElementById('downloadBtn').addEventListener('click', () => {
const canvas = document.getElementById('myCanvas');
downloadCanvasAsImage(canvas, 'sketch.png');
});
4. 注意事项与常见问题
-
文件大小限制：data URL 过大会导致内存压力，Chrome 对
download属性有约 2GB 上限，但实际建议单图控制在 10MB 内 -
IE 不支持：IE 11 及以下不支持
download属性，需降级使用msSaveBlob（需转为 Blob） -
移动端 Safari 限制：iOS Safari 不支持
download属性，点击后可能仅预览；可提示用户长按保存 -
高清导出：若 Canvas 是高清屏（devicePixelRatio > 1）渲染的，导出前应确保
width/height属性已按像素比缩放，否则图片模糊
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
