如何使用 Nextjs 和 Puppeteer 捕获网页屏幕截图

本篇文章向大家介绍《如何使用 Nextjs 和 Puppeteer 捕获网页屏幕截图》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

以编程方式捕获网页屏幕截图对于生成预览、创建基于图像的报告等非常有用。在本指南中，我们将构建一个 next.js api 路由，该路由采用 url 并生成 png 屏幕截图。我们的设置使用 puppeteer 和 chrome-aws-lambda 来利用无头 chrome 浏览器，使其多功能且可用于生产。

我们将首先设置一个新的 next.js 项目，并逐步浏览代码以了解 api 如何捕获屏幕截图。

先决条件

• 设置 next.js 应用
• 使用 puppeteer 配置 api 路由
• 为捕获接口创建react组件
• puppeteer 的本地与部署配置说明

开始新的 next.js 项目

1. 创建一个新的 next.js 应用程序：

npx create-next-app@latest capture-image-app
cd capture-image-app

1. 安装必要的依赖项：

npm install puppeteer puppeteer-core chrome-aws-lambda busboy

第2步：创建生成屏幕截图的api路由

现在，我们将设置一个 api 端点来根据提供的 url 捕获并返回屏幕截图。

在pages/api文件夹中，创建一个名为generate-png.ts的新文件并添加以下代码：

import { nextapirequest, nextapiresponse } from "next";
import busboy, { busboy } from "busboy"; // use busboy for multipart parsing
import chromium from "chrome-aws-lambda";
import puppeteercore from "puppeteer-core"; // import puppeteer-core directly
import puppeteer from "puppeteer"; // import puppeteer directly

// conditional import for puppeteer based on the environment
const puppeteermodule = process.env.node_env === "production" ? puppeteercore : puppeteer;

export const config = {
  api: {
    bodyparser: false, // disable default body parsing to handle raw binary data (blob)
  },
};

const delay = (ms: number): promise => new promise((resolve) => settimeout(resolve, ms));

export default async function handler(
  req: nextapirequest,
  res: nextapiresponse
): promise {
  try {
    if (req.method === "post") {
      const bb: busboy = busboy({ headers: req.headers });
      let width: number = 1920; // default width
      let height: number = 0; // default height
      let delaytime: number = 6000;
      const buffers: buffer[] = [];

      bb.on("file", (_name: string, file: nodejs.readablestream) => {
        file.on("data", (data: buffer) => buffers.push(data));
      });

      bb.on("field", (name: string, value: string) => {
        if (name === "width") width = parseint(value, 10) || 1920;
        if (name === "height") height = parseint(value, 10) || 0;
        if (name === "delay") delaytime = parseint(value, 10) || 6000;
      });

      bb.on("finish", async () => {
        const blobbuffer: buffer = buffer.concat(buffers);
        const htmlcontent: string = blobbuffer.tostring("utf-8");

        const browser = await puppeteermodule.launch({
          args: ["--start-maximized"],
          executablepath: process.env.node_env === "production"
            ? await chromium.executablepath || "/usr/bin/chromium-browser"
            : undefined,  // no custom executable path needed for local
          headless: true,
        });

        const page = await browser.newpage();

        // load the html content directly
        await page.setcontent(htmlcontent, { waituntil: "networkidle0" });

        //@ts-expect-error todo
        const bodyheight = await page.evaluate(() => {
          return document.body.scrollheight; // get the full scrollable height of the body
        });

        await page.setviewport({
          width: number(width),
          height: height || bodyheight, // use the provided height or fallback to the full body height
          devicescalefactor: 2,
        });

        await delay(delaytime);

        const screenshotbuffer = await page.screenshot({
          fullpage: !height,
          type: "png",
          omitbackground: false,
        });

        await browser.close();

        res.setheader("content-type", "image/png");
        res.setheader(
          "content-disposition",
          "attachment; filename=screenshot.png"
        );
        res.status(200).end(screenshotbuffer);
      });

      req.pipe(bb); // pipe the request stream to busboy
    } else {
      res.setheader("allow", ["post"]);
      res.status(405).end(`method ${req.method} not allowed`);
    }
  } catch (error) {
    console.error("error", error);
    res.status(500).end("internal server error");
  }
}

*说明：为本地环境和生产环境选择 puppeteer
*
在此代码中，我们为 puppeteer 设置了动态导入：

• 本地开发：如果 node_env 不是生产环境，它会使用 puppeteer，它设置起来更简单，并且不需要 chrome-aws-lambda。

• 生产：对于无服务器部署，环境将检测 node_env 作为生产并加载 puppeteer-core 以及 chrome-aws-lambda，这使得它可以在 aws lambda 和其他类似环境中工作。在此设置中，chrome-aws-lambda 提供正确的 chromium 路径，确保与无服务器提供商的兼容性。

第 3 步：为 ui 创建一个简单的 react 组件

在这里，我们将创建一个简单的表单，让用户输入网页捕获的值。此表单将触发生成功能以捕获并下载 pdf 格式的屏幕截图。

import { useState } from "react";

export default function ScreenCaptureComponent() {
  const [isProcessing, setProcessing] = useState(false);
  const [width, setWidth] = useState("1920");
  const [height, setHeight] = useState("1000");
  const [delay, setDelay] = useState("6000");

  // Function to clone HTML and prepare for capture
  function takeScreenshot() {
    const clonedElement = document.body.cloneNode(true) as HTMLElement;
    const blob = new Blob([clonedElement.outerHTML], { type: "text/html" });
    return blob;
  }

  // Function to capture screenshot by sending cloned HTML to API
  async function generateCapture() {
    setProcessing(true);

    const htmlBlob = takeScreenshot();

    if (!htmlBlob) {
      setProcessing(false);
      return;
    }

    try {
      const formData = new FormData();
      formData.append("file", htmlBlob);
      formData.append("width", width);
      formData.append("height", height);
      formData.append("delay", delay);
      const response = await fetch("/api/generate-png", {
        method: "POST",
        body: formData,
      });

      if (!response.ok) throw new Error("Capture failed");

      const blob = await response.blob();
      const downloadUrl = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = downloadUrl;
      link.download = "capture.png";
      link.click();
      URL.revokeObjectURL(downloadUrl);
    } catch (error) {
      console.error("Failed to capture screenshot", error);
    } finally {
      setProcessing(false);
    }
  }

  return (
    

      

        Webpage Screenshot Capture
      
      
 {
          e.preventDefault();
          generateCapture();
        }}
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          marginBottom: "16px",
        }}
      >
        
          Width (px)
        
         setWidth(e.target.value)}
          style={{
            width: "100%",
            padding: "8px",
            marginBottom: "16px",
            borderRadius: "4px",
            border: "1px solid #ccc",
            outline: "none",
          }}
        >
          1920 (Full HD)
          1366 (Laptop)
          1280 (Desktop)
          1024 (Tablet Landscape)
          768 (Tablet Portrait)
          375 (Mobile)
        

        
          Height (px)
        
         setHeight(e.target.value)}
          required
          style={{
            width: "100%",
            padding: "8px",
            marginBottom: "16px",
            borderRadius: "4px",
            border: "1px solid #ccc",
            outline: "none",
          }}
        />

        
          Delay (ms)
        
         setDelay(e.target.value)}
          required
          style={{
            width: "100%",
            padding: "8px",
            marginBottom: "16px",
            borderRadius: "4px",
            border: "1px solid #ccc",
            outline: "none",
          }}
        />

        
          {isProcessing ? "Capturing..." : "Capture Screenshot"}
        
      

      {/* Example HTML Element to Capture */}
      

        

          Content to Capture
        
        
This is an example of the HTML content that will be captured.
      
    
  );
}

结论

本教程涵盖在 next.js 中设置网页捕获工具、使用 puppeteer 处理屏幕截图以及创建交互式前端组件。请记住在本地使用 puppeteer 并在生产中切换到 puppeteer-core，以减少捆绑包大小并优化无服务器环境。快乐编码！

到这里，我们也就讲完了《如何使用 Nextjs 和 Puppeteer 捕获网页屏幕截图》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！