时间戳

首页 > 解决方案 > 如何让 Puppeteer 在客户端使用 ReactJS 应用程序

javascript - 如何让 Puppeteer 在客户端使用 ReactJS 应用程序

问题描述

我是 React 的新手，我正在开发一个应用程序，它将获取网页的实际屏幕截图，并且该应用程序可以在截取的屏幕截图上绘制和添加涂鸦。我最初使用 html2canvas 和 domToImage 来获取客户端屏幕截图，但它并没有完全按照网页中显示的方式呈现图像。

Reddit 用户 /pamblam0 建议我研究 Google 的 Puppeteer。它的工作原理是它会启动一个无头 chromium 浏览器，该浏览器会转到我在本地主机上的 react 应用程序，然后轻松获取整个页面的屏幕截图。然而，我的问题是 puppeteer 在 React 应用程序中表现不佳。它给了我一个 ws 错误，正如在谷歌搜索中解释的那样，可以通过简单地安装 ws 来修复（顺便说一句，这不起作用）。

现在会发生什么我的 puppeteer 脚本可以解决我的 react 应用程序。据我了解，它不适用于客户端应用程序（我可能错了）。我想要发生的是，每当我从我的 react 应用程序中单击按钮时，puppeteer 应该执行并返回一个 base64 字符串，然后将其传递给我的 react 应用程序中的一个组件。

这是我到目前为止所做的。

puppeteerApp.js

const puppeteer = require('puppeteer');

const takeScreenshot = async () => {
    puppeteer.launch().then(async browser => {
        const page = await browser.newPage();
        const options = {
            path: 'saved_images/webshot.png',
            encoding: 'base64'
        }
        await page.goto('http://localhost:3000/', { waitUntil: 'networkidle2' });
        const elem = await page.$('iframe').then(async (iframe) => {
            return await iframe.screenshot(options)
        });

        await browser.close()
    });
}

takeScreenshot();

来自反应应用程序的代码。 应用程序.js

import React, { Component } from 'react';
import ScreenshotsContainer from './containers/ScreenshotsContainer/ScreenshotsContainer'
import ImageContainer from './containers/ImageContainer/ImageContainer';
import html2canvas from 'html2canvas';
import domtoimage from 'dom-to-image';
import Button from './components/UI/Button/Button'
import classes from './App.module.css';
import { CSSTransition } from 'react-transition-group'
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';


class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      imgURIArray: [],
      img: null,
      showImageContainer: false,
      showScreenshotContainer: false,
      selectedImageURI: null,
      showSaveAnimation: false,
      showNotify: false
    }
  }


  storeImageToArrayHandler = (imgURI) => {
    if (imgURI !== "") {
      this.setState({ imgURIArray: [...this.state.imgURIArray, imgURI] }, () => {
        this.setState({ showImageContainer: !this.state.showImageContainer })
      })
    }
  }

  getScreenshotHandler = () => {
   //use puppeteer here!!!
  }



  getSelectedImageFromContainerHandler(selectedImageURI) {
    this.setState({
      selectedImageURI: selectedImageURI,
      showImageContainer: !this.state.showImageContainer
    })

  }

  showImageContainerHandler(showImageContainer) {
    this.setState({ showImageContainer: showImageContainer })
  }

  showScreenshotContainerHandler = () => {
    this.setState({ showScreenshotContainer: !this.state.showScreenshotContainer })
  }
  notify = (submitSuccessful, msg) => {
    let message = msg ? msg : ""
    submitSuccessful ?
      toast.success(message, {
        autoClose: 3000,
        position: toast.POSITION.TOP_CENTER
      })
      :
      toast.error(message, {
        position: toast.POSITION.TOP_CENTER
      });

  }
  render() {
    let buttonOps = (
      <CSSTransition
        in={!this.state.showScreenshotContainer}
        appear={true}
        timeout={300}
        classNames="fade"
      >
        <div className={classes.optionButtons}>
          <Button icon={"fas fa-camera"} type={"button-success"} gridClass={""} buttonName={""} style={{ width: "100%", height: "70px" }} onClick={() => this.getScreenshotHandler} />
          <Button icon={"fas fa-images"} type={"button-primary "} gridClass={""} buttonName={""} style={{ width: "100%", height: "70px" }} onClick={() => this.showScreenshotContainerHandler} />
        </div>
      </CSSTransition>
    )

    return (
      <div>
        {
          this.state.showImageContainer ?
            <div>
              <ImageContainer
                img={this.state.img}
                showImageContainer={showImageContainer => this.showImageContainerHandler(showImageContainer)}
                storeImageToArrayHandler={imgURI => this.storeImageToArrayHandler(imgURI)}
                notify={(submitSuccessful, msg) => this.notify(submitSuccessful, msg)}
              />
            </div>
            : null
        }
        <CSSTransition
          in={this.state.showScreenshotContainer}
          appear={true}
          timeout={300}
          classNames="slide"
          unmountOnExit
          onExited={() => {
            this.setState({ showScreenshotContainer: false })
          }}
        >
          <ScreenshotsContainer
            imgURIArray={this.state.imgURIArray}
            getSelectedImageFromContainerHandler={imgURI => this.getSelectedImageFromContainerHandler(imgURI)}
            showScreenshotContainerHandler={() => this.showScreenshotContainerHandler}
            notify={(submitSuccessful, msg) => this.notify(submitSuccessful, msg)}
          />

        </CSSTransition>
        {this.state.showImageContainer ? null : buttonOps}
        {/* <button onClick={this.notify}>Notify !</button> */}
        <ToastContainer />

      </div >
    );
  }
}

export default App;

任何帮助，将不胜感激。谢谢！

标签： javascriptnode.jsreactjspuppeteer

解决方案

您的 React.js 应用程序在客户端（在浏览器中）运行。Puppeteer 无法在该环境中运行，因为您无法在浏览器中启动完整的浏览器。

你需要的是一个为你做这件事的服务器。您可以提供 HTTP 端点（选项 1）或公开您的 puppeteer Websocket（选项 2）：

选项 1：提供 HTTP 端点

对于此选项，您设置一个服务器来处理传入请求并为您运行任务（制作屏幕截图）：

服务器.js

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

const app = express();

app.get('/screenshot', async (req, res) => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(req.query.url); // URL is given by the "user" (your client-side application)
    const screenshotBuffer = await page.screenshot();

    // Respond with the image
    res.writeHead(200, {
        'Content-Type': 'image/png',
        'Content-Length': screenshotBuffer.length
    });
    res.end(screenshotBuffer);

    await browser.close();
})

app.listen(4000);

启动应用程序，node server.js您现在可以将 URL 传递到您的服务器并从您的服务器获取屏幕截图：http://localhost:4000/screenshot?url=https://example.com/

然后，来自服务器的响应可以用作应用程序中图像元素的来源。

选项 2：将 puppeteer Websocket 暴露给客户端

您还可以通过公开 Websocket 从客户端控制浏览器（在服务器上运行）。

为此，您需要像这样公开服务器的 Websocket：

服务器.js

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const browserWSEndpoint = browser.wsEndpoint();
    browser.disconnect(); // Disconnect from the browser, but don't close it
    console.log(browserWSEndpoint); // Communicate the Websocket URL to the client-side
    // example output: ws://127.0.0.1:55620/devtools/browser/e62ec4c8-1f05-42a1-86ce-7b8dd3403f91
})();

现在，您可以使用客户端的puppeteer 包从客户端控制浏览器（在服务器上运行）。在这种情况下，您现在可以通过puppeteer.connect连接到浏览器并以这种方式制作屏幕截图。

我强烈建议使用选项 1，因为在选项 2 中，您将正在运行的浏览器完全暴露给客户端。即使使用选项 1，您仍然需要处理用户输入验证、超时、导航错误等。

推荐阅读