JavaScript 中怎么把 canvas 节点转换成图片插入-js教程-PHP中文网

可用canvas.todataurl()或toblob()导出图片：todataurl生成base64适合小图预览，toblob生成blob更省内存、适合大图或上传；均需确保canvas已绘制且未跨域，导出尺寸以width/height属性为准。

javascript 中怎么把 canvas 节点转换成图片插入

可以用 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 是异步操作：

调用 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);