freemarker模板引擎结合node puppeteer库实现html生成图片

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文件，并将其截屏保存为图片。这个过程模拟了实际网站开发中的一个常见需求，即根据数据动态生成可共享的社交媒体图片。