如何使用JavaScript将HTML页面转换成图片?

18 min read

要将HTML页面生成为图片,您可以使用PhantomJS或Puppeteer等Headless浏览器,以下是一个使用Puppeteer的Node.js代码示例:

const puppeteer = require('puppeteer');

async function generateImage() {
  // Launch a headless browser
  const browser = await puppeteer.launch();
  
  // Open a new page
  const page = await browser.newPage();

  // Navigate to the HTML page
  await page.goto('http://example.com/', { waitUntil: 'networkidle2' });

  // Set the viewport size to the full page size
  const fullPageHeight = await page.evaluate(() => {
    return document.documentElement.offsetHeight;
  });
  await page.setViewport({
    width: 1280,
    height: fullPageHeight
  });

  // Capture a screenshot of the page and save it as a PNG image
  await page.screenshot({ path: 'screenshot.png', fullPage: true });

  // Close the browser
  await browser.close();
}

generateImage();

在此示例中,我们使用Puppeteer打开一个新页面并导航到指定的HTML页面。接下来,我们将浏览器视口的高度设置为页面的完整高度,然后使用screenshot()方法对页面进行截图并将其保存为PNG图像。最后,我们会关闭浏览器。