使用 Chrome 控制台将 HTML 的某部分输出成图片

20 min read

要在 Chrome 控制台中将 HTML 的某部分输出为图片，您可以使用 Canvas API 来实现。以下是一个简单的示例代码：

首先，您需要定位到要截图的 HTML 元素。例如，如果要截图整个页面，可以使用 document.documentElement 来获取 <html> 元素。

然后，创建一个 canvas 元素，并将其尺寸设置为与要截图的元素相同。

接下来，使用 canvas.getContext('2d') 获取 2D 渲染上下文。

使用 canvas.getContext('2d').drawImage() 方法将 HTML 元素绘制到画布上。

最后，使用 canvas.toDataURL() 方法将画布内容转换为 base64 编码的图片数据。您可以使用 window.open() 方法在新标签或窗口中打开生成的图片。

下面是完整的示例代码：

// 定位到要截图的 HTML 元素
let elementToCapture = document.documentElement;

// 创建 canvas 元素
let canvas = document.createElement('canvas');

// 设置 canvas 的尺寸为元素的宽高
canvas.width = elementToCapture.scrollWidth;
canvas.height = elementToCapture.scrollHeight;

// 获取 2D 渲染上下文
let context = canvas.getContext('2d');

// 在画布上绘制 HTML 元素
context.drawImage(elementToCapture, 0, 0);

// 将画布内容转换为 base64 编码的图片数据
let dataURL = canvas.toDataURL();

// 在新标签或窗口中打开生成的图片
window.open(dataURL);

请注意，以上示例代码仅适用于在 Chrome 控制台中执行。如果将代码用于网页中，可能会遇到安全限制问题。