轻量级网页截图工具：html-screen-capture-js-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00294/article/details/142163143

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

html-screen-capture-js A tiny, highly-customizable, single-function javascript/typescript library that captures a webpage and returns a new lightweight, self-contained HTML document. The library removes all external file dependencies while preserving the original appearance of the page. At only 12KB, it offers unparalleled speed and peerless reliability. 项目地址: https://gitcode.com/gh_mirrors/ht/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'
        ]
    }
);