1. 产品
  2.   图片
  3.   Node.js
  4.   Node-HTML-to-Image
 
  

免费的 Node.js 图像 API，用于将 HTML 转换为图像

开源 Node.js 图像处理库，完全支持图像加载和转换，开发人员可以在 Node.js 应用程序内将 HTML 内容转换为图像（JPEG、PNG、GIF）。

在瞬息万变的 Web 开发世界中，将 HTML 转换为图像的能力开辟了一个充满创意可能性的世界。无论是生成社交媒体图形、创建可视化报告还是设计电子邮件的自定义内容，将 HTML 转换为图像都可以简化许多流程。Node-HTML-to-Image 库是一个开源工具，使开发人员能够做到这一点，它提供了一种使用 Node.js 从 HTML 生成图像的简单方法。软件开发人员可以创建令人惊叹的视觉效果、生成缩略图，甚至可以自动执行需要图像生成的任务。该库有几个重要功能，例如新图像生成、从外部源加载 HTML 并将其转换为图像、添加自定义 CSS 和 JavaScript、一次生成多个图像等等。

Node-HTML-to-Image 库非常易于使用，它允许软件开发人员仅用几行代码即可加载和转换 HTML 字符串或文件为高质量图像。该库由 Frinyvonnick 开发，通过 Puppeteer 库利用 Headless Chromium 的强大功能将 HTML 和 CSS 渲染为 PNG、JPEG 甚至 WebP 图像。这使开发人员能够创建能够捕捉 HTML 完整视觉复杂性的图像，包括对现代 ​​CSS、字体甚至 JavaScript 执行的支持。您可以通过指定图像质量、宽度和高度等选项来自定义输出。此外，用户可以从网页中提取图像，从而构建强大的网页抓取应用程序。凭借其灵活性、可定制性和易用性，难怪开发人员纷纷涌向这个库。

Previous Next

开始使用 Node-HTML-to-Image

安装 Node-HTML-to-Image t 的推荐方法是使用 NPM。请使用以下命令顺利安装。

通过 NPM 安装 Node-HTML-to-Image

npm install node-html-to-image

通过 Yarn 安装 Node-HTML-to-Image

yarn add node-html-to-image

在 Node.js 中从 HTML 代码生成图像

Node-HTML-to-Image 库的主要优势之一是其简单性，并且可以轻松与任何 Node.js 应用程序集成。只需几行代码，软件开发人员就可以开始在自己的 Node.js 应用程序中从 HTML 内容生成图像。这种易用性使所有技能水平的开发人员都可以使用它。在下面的示例中，该库获取一个简单的 HTML 字符串并将其转换为 PNG 图像。输出图像 image.png 保存在根目录中。

如何在 Node.js 应用程序内从 HTML 生成 PNG 图像？

const nodeHtmlToImage = require('node-html-to-image');

nodeHtmlToImage({
  output: './image.png',
  html: '
Hello, World!
'
})
  .then(() => console.log('Image created successfully!'));

支持复杂的 HTML 和 CSS

开源的 Node-HTML-to-Image 并不局限于基本的 HTML 处理。它可以处理具有大量 CSS 样式以及 JavaScript 的复杂 HTML 文档。无论您使用的是 Flexbox 或 Grid 等现代 CSS 功能，还是嵌入自定义字体，该库都会准确地将您的内容呈现为 JPEG、PNG、WebP 等图像文件格式。下面是一个示例，演示了开发人员如何从更复杂的 HTML 布局生成图像，包括 Flexbox 样式和自定义颜色，从而生成设计精良的图像。

如何在 Node.js 应用程序中从更复杂的 HTML 代码生成图像？

const nodeHtmlToImage = require('node-html-to-image');

const htmlContent = `

  
    

      

        
Welcome to My Website

        
Building the web, one pixel at a time.

      

    

  
`;

nodeHtmlToImage({
  output: './welcome-image.png',
  html: htmlContent
})
  .then(() => console.log('Complex layout image created successfully!'));

可自定义的输出图像格式

Node-HTML-to-Image 库支持多种输出图像格式，包括 PNG、JPEG 和 WebP。这种灵活性让您可以根据具体用例选择最佳格式，无论是为了提高 Web 性能还是图像质量。下面是一个示例，展示了用户如何将输出指定为 JPEG 图像，这对于需要最小化文件大小而又不会过多影响质量的场景非常有用。

如何在 Node.js 中将 HTML 转换为图像时将输出图像格式指定为 JPEG？

nodeHtmlToImage({
  output: './output-image.jpg',
  html: '
JPEG Image Example
',
  type: 'jpeg'
})
  .then(() => console.log('JPEG image created successfully!'));

Node.js 中的高级图像渲染支持

Node-HTML-to-Image 库提供了对广泛自定义渲染过程的完整支持。软件开发人员可以定义视口大小、设备比例因子，甚至可以在渲染之前将自定义 CSS 和 JavaScript 注入 HTML。以下示例显示了如何使用 800x600 像素的自定义视口大小渲染图像，并将质量设置为 100，以确保最高的图像质量。

如何在 Node.js 应用程序内以自定义视口大小和质量渲染图像？

nodeHtmlToImage({
  output: './custom-image.png',
  html: '
Custom Viewport
',
  viewport: { width: 800, height: 600 },
  quality: 100
})
  .then(() => console.log('Image with custom viewport created successfully!'));
 中国人