如何在Node.js中将超文本标记语言转换为图像

npm install puppeteer

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

(async () => {
  // 读取本地 HTML 文件
  const htmlContent = fs.readFileSync('path/to/your/file.html', 'utf8');

  // 启动浏览器
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 设置 HTML 内容
  await page.setContent(htmlContent, { waitUntil: 'networkidle0' });

  // 设置视口大小（可选）
  await page.setViewport({ width: 1280, height: 800 });

  // 截图并保存为图像
  await page.screenshot({ path: 'output.png', fullPage: true });

  // 关闭浏览器
  await browser.close();

  console.log('HTML 已成功转换为 output.png');
})();

npm install html-to-image canvas

const { toPng } = require('html-to-image');
const fs = require('fs');
const jsdom = require('jsdom');
const { JSDOM } = jsdom;

(async () => {
  // 读取本地 HTML 文件
  const htmlContent = fs.readFileSync('path/to/your/file.html', 'utf8');

  // 创建一个虚拟的 DOM
  const dom = new JSDOM(htmlContent);
  const node = dom.window.document.querySelector('body'); // 选择要转换的节点

  // 将 DOM 节点转换为 PNG 图像
  const dataUrl = await toPng(node, { quality: 1 });

  // 将 Data URL 写入文件
  fs.writeFileSync('output.png', dataUrl.split(',')[1], 'base64');

  console.log('HTML 已成功转换为 output.png');
})();

const axios = require('axios');
const fs = require('fs');

(async () => {
  const htmlContent = fs.readFileSync('path/to/your/file.html', 'utf8');
  const response = await axios.post('https://api.htmlcsstoimage.com/v1/generate', {
    html: htmlContent,
    outputFormat: 'png',
    // 其他可选参数
  }, {
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY', // 替换为你的 API 密钥
      'Content-Type': 'application/json'
    }
  });

  const imageUrl = response.data.url;
  const imageResponse = await axios.get(imageUrl, { responseType: 'stream' });
  imageResponse.data.pipe(fs.createWriteStream('output.png'));

  console.log('HTML 已成功转换为 output.png');
})();