html2canvas - Screenshots with JavaScript

简介

html2canvas 是一个使用 JavaScript 实现网页截图功能的工具，其核心理念是“Screenshots with JavaScript”。它允许开发者直接在浏览器中将指定的 DOM 元素渲染为 Canvas 图像，而无需依赖服务端渲染。该项目由 Niklas von Hertzen 创建，基于 MIT License 开源。

主要功能

• DOM 元素截图：通过传入页面中的 DOM 节点，将其内容绘制到 <canvas> 中。例如，对如下 HTML 结构：
  html 复制代码

  <div id="capture" style="padding: 10px; background: #f5da55">
      <h4 style="color: #000; ">Hello world!</h4>
  </div>

  使用 JavaScript 即可截取并追加到页面：
  javascript 复制代码

  html2canvas(document.querySelector("#capture")).then(canvas => {
      document.body.appendChild(canvas)
  });

• 在线试用：提供 “Try it out” 功能，可渲染当前页面的视口（viewport）进行测试（页面中含 “Capture” 按钮触发）。
• 多种安装方式：支持通过 NPM（npm install --save html2canvas）或 Yarn（yarn add html2canvas）安装，也提供可直接引用的 html2canvas.js 与 html2canvas.min.js（压缩后约 45kb gzipped）。

适用场景

• 需要在前端实现网页局部或整页截图的应用，如生成分享卡片、保存页面状态、报表导出等。
• 希望以纯客户端 JavaScript 方案完成 DOM 到图像转换，避免服务端依赖的项目。

相关资源

• 官方文档：Documentation
• 社交联系：Follow @niklasvh

Created by Niklas von Hertzen. Licensed under the MIT License.