以编程方式捕获网页屏幕截图对于生成预览、创建基于图像的报告等非常有用。在本指南中，我们将构建一个 next.js api 路由，该路由采用 url 并生成 png 屏幕截图。我们的设置使用 puppeteer 和 chrome-aws-lambda 来利用无头 chrome 浏览器，使其多功能且可用于生产。
我们将首先设置一个新的 next.js 项目，并逐步浏览代码以了解 api 如何捕获屏幕截图。
先决条件
设置 next.js 应用使用 puppeteer 配置 api 路由为捕获接口创建react组件puppeteer 的本地与部署配置说明
开始新的 next.js 项目
创建一个新的 next.js 应用程序：
npx create-next-app@latest capture-image-appcd capture-image-app
安装必要的依赖项：
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 parsingimport chromium from "chrome-aws-lambda";import puppeteercore from "puppeteer-core"; // import puppeteer-core directlyimport puppeteer from "puppeteer"; // import puppeteer directly// conditional import for puppeteer based on the environmentconst 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", }} > 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) setHeight(e.target.value)} required style={{ width: "100%", padding: "8px", marginBottom: "16px", borderRadius: "4px", border: "1px solid #ccc", outline: "none", }} /> setDelay(e.target.value)} required style={{ width: "100%", padding: "8px", marginBottom: "16px", borderRadius: "4px", border: "1px solid #ccc", outline: "none", }} /> {/* 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 捕获网页屏幕截图的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1495426.html
微信扫一扫 
支付宝扫一扫 
