轻量级网页截图工具：html-screen-capture-js

轻量级网页截图工具：html-screen-capture-js

项目介绍

html-screen-capture-js 是一个极简、高度可定制的 JavaScript/TypeScript 库，专注于网页截图功能。它能够将网页内容捕获并生成一个轻量级、自包含的 HTML 文档，去除所有外部文件依赖，同时保留原始页面的外观。该库体积仅为 12KB，提供了无与伦比的速度和可靠性。

项目技术分析

html-screen-capture-js 的核心功能是将传入的 HTML 文档转换为一个全新的、自包含的 HTML 文档对象。该库通过以下技术手段实现：

• 去除外部依赖：所有脚本、CSS 类/样式被替换为新的内联样式，图片资源被替换为 base64 编码的版本，确保生成的 HTML 文档没有任何外部依赖。
• 自定义选项：通过提供额外的参数，用户可以自定义生成的 HTML 文档的某些方面，如忽略某些元素、添加自定义 CSS 规则等。
• 兼容性：源代码使用 ES6 编写，并被转译为 ES5，确保在不同环境下的兼容性。

项目及技术应用场景

html-screen-capture-js 的应用场景非常广泛，包括但不限于：

• 网页截图：生成网页的“快照”，并将其显示在 iframe 中。
• 去除外部依赖：在更复杂的流程中，作为去除 HTML 文档外部依赖的一步。
• 保存网页：将网页保存为单文件自包含的 HTML 文档，方便用户本地保存。
• 远程传输：将完整的网页内容作为简单的字符串发送到远程服务器。
• 合规性记录：捕获用户在页面上的操作，用于合规性记录（如注册同意书等）。

项目特点

• 轻量级：库体积仅为 12KB，加载速度极快。
• 高度可定制：提供多种自定义选项，满足不同需求。
• 无外部依赖：生成的 HTML 文档完全自包含，无需外部资源。
• 跨平台兼容：支持 ES6 和 ES5，适用于多种开发环境。
• 开源免费：采用 MIT 许可证，完全免费使用。

使用示例

通过导入使用

import { capture, OutputType } from 'html-screen-capture-js';

const str = capture(
    OutputType.STRING,
    window.document,
    {}
);

通过全局变量使用（适用于 ES5）

var str = htmlScreenCaptureJs.capture(
    'string',
    window.document,
    {} 
);

自定义选项示例

import {capture, OutputType} from 'html-screen-capture-js';

const htmlDocStr = capture(
    OutputType.STRING,
    window.document,
    {
        rulesToAddToDocStyle: [
            '@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap")'
        ],
        cssSelectorsOfIgnoredElements: [
            '.modal-dialog-backdrop',
            '.modal-dialog--error'
        ]
    }
);

结语

html-screen-capture-js 是一个功能强大且易于使用的网页截图工具，适用于各种需要捕获和保存网页内容的场景。无论你是开发者还是普通用户，都能从中受益。赶快尝试一下吧！

访问项目仓库 | 查看演示