如何将 HTML 画布导出为图像或 PDF 格式？掌握多种方法

2024-03-09 00:34:09

如何捕获 HTML 画布并导出为图像或 PDF

作为一名经验丰富的程序员和技术作家，我一直在探索如何将 HTML 画布捕获为 GIF、JPG、PNG 或 PDF 格式。无论你是为了共享、打印还是存档，本文将指导你使用 Canvas API、第三方库和 JavaScript PDF 库将动态图形转换为各种格式。

将画布捕获为图像

Canvas API 中的 toDataURL() 方法能够将画布内容转换为 Data URI 格式的图像。你可以使用 JavaScript 代码将其进一步转换为 PNG、JPG 或 GIF 格式。

1. 使用 Canvas API

const canvas = document.getElementById('myCanvas');
const dataURL = canvas.toDataURL('image/png'); // 替换为 'image/jpg' 或 'image/gif'
const image = new Image();
image.src = dataURL;

2. 使用第三方库

例如，html2canvas 库可以简化图像捕获过程：

html2canvas(document.getElementById('myCanvas')).then((canvas) => {
  const image = canvas.toDataURL('image/png'); // 替换为 'image/jpg' 或 'image/gif'
});

将画布捕获为 PDF

使用 JavaScript PDF 库 jspdf，可以创建和操作 PDF 文档：

const canvas = document.getElementById('myCanvas');
const imgData = canvas.toDataURL('image/png');
const doc = new jsPDF();
doc.addImage(imgData, 'PNG', 0, 0);
doc.save('canvas.pdf');