const puppeteer = require('puppeteer');
const fs = require('fs');
const freemarker = require('freemarker');
// 模拟的数据模型
const dataModel = {
title: '示例图片标题',
imageUrl: 'https://example.com/image.jpg',
description: '这是一个示例图片的描述。'
};
// FreeMarker模板路径
const templatePath = 'path/to/template.ftl';
// 输出的HTML文件路径
const htmlOutputPath = 'path/to/output.html';
// 输出的图片文件路径
const imageOutputPath = 'path/to/output.png';
// FreeMarker配置
const configuration = new freemarker.Configuration();
configuration.setDirectoryForTemplateLoading(require('path').dirname(templatePath));
// 使用FreeMarker渲染HTML
freemarker.render(dataModel, templatePath, htmlOutputPath, function(error) {
if (error) {
console.error('FreeMarker渲染错误:', error);
return;
}
// 使用Puppeteer渲染HTML为图片
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('file://' + htmlOutputPath, { waitUntil: 'networkidle2' });
await page.screenshot({ path: imageOutputPath, fullPage: true });
await browser.close();
console.log('图片已生成:', imageOutputPath);
})();
});这个示例代码展示了如何使用FreeMarker模板引擎和Node.js的Puppeteer库来生成HTML，并将其转换为图片。首先，我们使用FreeMarker将数据模型与HTML模板结合，生成输出HTML文件。接下来，我们使用Puppeteer加载输出的HTML文件，并将其截屏保存为图片。这个过程模拟了实际网站开发中的一个常见需求，即根据数据动态生成可共享的社交媒体图片。