可用canvas.toDataURL()或toBlob()导出图片：toDataURL生成base64适合小图预览，toBlob生成Blob更省内存、适合大图或上传；均需确保canvas已绘制且未跨域，导出尺寸以width/height属性为准。
可以用 canvas.toDataURL() 或 canvas.toBlob() 方法把 canvas 内容转成图片数据，再创建 <img> 元素插入页面。
用 toDataURL 插入 base64 图片
适合快速预览、小图或对兼容性要求高的场景。生成的 base64 字符串可直接赋给 img.src：
- 调用
canvas.toDataURL('image/png')（默认 PNG）或'image/jpeg'（支持质量参数） - 创建
new Image()，设置src为返回的 data URL - 等图片加载完成（
img.onload）后，再插入 DOM，避免空白
示例：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
const img = new Image();
img.src = canvas.toDataURL('image/png');
img.onload = () => {
document.body.appendChild(img); // 或插入指定容器
};
用 toBlob 插入二进制 Blob 图片（推荐）
更节省内存，适合大图或需后续处理（如上传）。注意 toBlob 是异步操作：
立即学习“Java免费学习笔记（深入）”；
- 调用
canvas.toBlob(callback, 'image/jpeg', 0.9)，第三个参数是 JPEG 质量（0–1） - 在回调中用
URL.createObjectURL(blob)创建临时 URL - 赋给
img.src，同样建议监听onload后插入 - 插入完成后可选调用
URL.revokeObjectURL()释放内存（非必须但推荐）
示例：
canvas.toBlob(blob => {
const img = new Image();
img.src = URL.createObjectURL(blob);
img.onload = () => {
document.body.appendChild(img);
URL.revokeObjectURL(img.src); // 清理临时 URL
};
}, 'image/jpeg', 0.85);
注意事项
- Canvas 必须已绘制内容，且未跨域（否则
toDataURL/toBlob会抛出安全错误） - 若 canvas 来源是跨域图片，需确保图片设置了
crossOrigin="anonymous" - 导出尺寸以 canvas 的
width/height属性为准，不是 CSS 样式宽高 - 移动端 Safari 对
toBlob支持良好（iOS 13+），旧版可用toDataURL回退
