【亲测免费】 HTML to Image 开源项目教程

项目介绍

html-to-image 是一个开源项目，旨在通过使用 HTML5 canvas 和 SVG 技术，从 DOM 节点生成图像。该项目是 dom-to-image 的一个分支，具有更易维护的代码和一些新特性。它支持将 HTML 页面转换为 PNG、JPEG、SVG 等格式的图像，适用于需要将网页内容保存为图像的场景。

项目快速启动

安装

首先，通过 npm 安装 html-to-image：

npm install --save html-to-image

基本使用

以下是一个简单的示例，展示如何将一个 DOM 节点转换为 PNG 图像并显示在页面上：

import * as htmlToImage from 'html-to-image';

const node = document.getElementById('my-node');

htmlToImage.toPng(node)
  .then(function (dataUrl) {
    const img = new Image();
    img.src = dataUrl;
    document.body.appendChild(img);
  })
  .catch(function (error) {
    console.error('oops, something went wrong!', error);
  });

下载图像

以下示例展示如何将生成的图像下载到本地：

htmlToImage.toPng(document.getElementById('my-node'))
  .then(function (dataUrl) {
    const link = document.createElement('a');
    link.download = 'my-image.png';
    link.href = dataUrl;
    link.click();
  });

应用案例和最佳实践

案例一：生成报告图像

在数据可视化应用中，经常需要将生成的报告或图表保存为图像。使用 html-to-image 可以轻松实现这一功能：

const reportNode = document.getElementById('report');

htmlToImage.toJpeg(reportNode, { quality: 0.95 })
  .then(function (dataUrl) {
    const link = document.createElement('a');
    link.download = 'report.jpeg';
    link.href = dataUrl;
    link.click();
  });

案例二：过滤特定元素

有时需要从生成的图像中排除某些元素，例如广告或弹窗。可以通过自定义过滤函数实现：

function filter(node) {
  return (node.tagName !== 'I');
}

htmlToImage.toSvg(document.getElementById('my-node'), { filter: filter })
  .then(function (dataUrl) {
    // 处理生成的 SVG 数据 URL
  });

典型生态项目

iLovePDF

iLovePDF 是一个强大的在线 PDF 工具，提供了包括 HTML 转图像在内的多种功能。它集成了 html-to-image 等开源项目，为用户提供高质量的图像转换服务。

FileSaver.js

FileSaver.js 是一个用于在客户端保存文件的简单工具，常与 html-to-image 结合使用，实现图像的下载功能：

import { saveAs } from 'file-saver';

htmlToImage.toBlob(document.getElementById('my-node'))
  .then(function (blob) {
    saveAs(blob, 'my-node.png');
  });

通过这些生态项目的结合使用，可以进一步扩展 html-to-image 的功能，满足更多复杂场景的需求。