动态图片生成是我们日常开发中经常遇到的需求，比如宣传海报生成，电商商品图动态生成等，本文总结出三种常见的 HTML 生成图片的方案。
一、html2canvas
html2canvas库能够将 HTML 元素渲染为 Canvas，然后将其转换为图片。它的优点在于可以无需服务端，直接在前端进行图片生成，适合快速生成简单的图片。但在性能方面，对于复杂的 DOM 结构，html2canvas 的性能可能会受到影响。
使用方法
- 安装 html2canvas
npm install html2canvas
2、在react中使用
import React, { useRef } from 'react';
import html2canvas from 'html2canvas';
const App = () => {
const captureRef = useRef(null);
const handleDownloadImage = () => {
html2canvas(captureRef.current).then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = imgData;
link.download = 'captured-image.png';
link.click();
});
};
return (
<div>
<div ref={captureRef} style={{ padding: '20px', background: '#f5f5f5', textAlign: 'center' }}>
<h1>生成的海报</h1>
<p>这是一个示例文本。</p>
<img src="https://via.placeholder.com/150" alt="示例图片" />
</div>
<button onClick={handleDownloadImage}>下载图片</button>
</div>
);
};
export default App;
二、Puppeteer
Puppeteer 是一个 Node.js 库，提供了一个高级 API 来控制无头 Chrome 浏览器。它适合需要处理复杂页面和动态内容的场景，能够生成高质量的图片。但在处理大型页面时，可能会有大量的资源开销。
使用方法
- 安装 Puppeteer
npm install puppeteer
- nodejs代码
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://localhost:3000'); // 你的 HTML 页面地址
await page.screenshot({ path: 'screenshot.png' });
await browser.close();
})();
三、使用第三方API
如果不想自己搭建环境或处理复杂的代码，可以使用第三方 API 来生成图片。这些服务通常提供简单的接口，用户只需提供 HTML 内容或 URL，即可获取生成的图片。无需关心实现上的技术细节及部署问题。
1、Image Rendering API
腾讯云EdgeOne上的免费工具，通过简单的配置即可实现html代码转图片。
使用方法：
-
注册腾讯云账号，登陆EdgeOne控制台，找到图片渲染的菜单：
-
创建模版后，在html+css+data区域填入代码及动态数据
-
点击保存模版后，即可在“API”tab下，查看调用的具体方法。还可生成可直接访问的图片URL。
更多详细的使用教程可以看：这里
2、ScreenshotAPI
允许用户通过 API 调用生成网页截图，支持自定义参数。这个工具本质上是对你的网页截图，所以需要有可访问的网页URL。
使用方法：
- 注册并获取 API 密钥
- 发送请求
curl "https://api.screenshotapi.net/screenshot?token=YOUR_API_KEY&url=http://example.com"
