Node.js Puppeteer 生成 Mermaid 图并返回图片

可以将回传的 base64 改为回传图片。我们可以使用 Node.js 的 Buffer 对象来读取文件并将其转换为 base64 字符串，然后将其作为响应的主体发送回去。以下是修改后的代码：

const fs = require('fs');
const path = require('path');
const puppeteer = require('puppeteer');

const launchBrowser = async () => {
  const browser = await puppeteer.launch({
    args: [
      '--disable-gpu',
      '--disable-dev-shm-usage',
      '--disable-setuid-sandbox',
      '--no-first-run',
      '--no-zygote',
      '--no-sandbox'
    ],
    headless: true,
  });

  return browser;
};

const autoScroll = async (page) => {
  return page.evaluate(() => {
    return new Promise((resolve, reject) => {
      var totalHeight = 0;
      var distance = 100;
      var timer = setInterval(() => {
        var scrollHeight = document.body.scrollHeight;
        window.scrollBy(0, distance);
        totalHeight += distance;
        if (totalHeight >= scrollHeight) {
          clearInterval(timer);
          resolve();
        }
      }, 100);
    });
  });
};

exports.handler = async (event, context) => {
  const input = JSON.parse(event.body).input;
  console.log('Input:', input);

  const fileinput = `${Date.now()}.mmd`;
  fs.writeFileSync(`/tmp/${fileinput}`, input);

  const output = `${Date.now()}.png`;
  const browser = await launchBrowser();
  const page = await browser.newPage();
  await page.emulateTimezone('Asia/Shanghai');

  try {
    const html = fs.readFileSync(path.join(__dirname, 'template.html'), 'utf8');
    const renderedHtml = html.replace('{{mermaid}}', input);
    const filehtml = `${Date.now()}.html`;
    fs.writeFileSync(`/tmp/${filehtml}`, renderedHtml);
    let url = 'file://' + path.join('/tmp', filehtml);
    await page.goto(url, { waitUntil: 'networkidle2' });
    await page.setViewport({ width: 1200, height: 800 });
    await autoScroll(page);
    await page.screenshot({ path: `/tmp/${output}`, fullPage: true, type: 'png' });

    console.log('Image generated:', output);
    const imageBuffer = fs.readFileSync(`/tmp/${output}`);
    return {
      statusCode: 200,
      headers: {
        'Content-Type': 'image/png',
      },
      body: imageBuffer.toString('base64'),
      isBase64Encoded: true,
    };
  } catch (err) {
    console.error(err);
    return {
      statusCode: 500,
      body: 'Error generating image',
    };
  } finally {
    await browser.close();
  }
};

这段代码通过 fs.readFileSync 读取生成好的 PNG 图片文件，并将其转换为 base64 编码字符串，然后作为响应的主体发送回去。这样，客户端就可以直接将响应内容作为图片数据进行展示。

注意：

• 确保 template.html 文件存在，并且包含 {{mermaid}} 占位符，用于替换 Mermaid 图的代码。
• 确保服务器环境允许访问 /tmp 目录，用于存储临时文件。
• 为了安全，建议在生产环境中使用更安全的临时文件存储方式，例如使用数据库或云存储。