将 html2canvas canvas 对象存储到数组

Question

我是 React 的新手。我正在玩 React 和 html2Canvas。我想做的是使用 html2canvas 来捕获我页面的 "screenshots"，但我想这样做，以便将我所有的屏幕截图存储在 canvas数组，这样我就可以将它们传递给组件并在单独的组件中显示每个 canvas 对象。

目前，我正在输出 canvas 数组，该数组从 html2canvas promise 的 then() 推送每个 canvas 对象。代码如下：

import React, { Component } from 'react';
import html2canvas from 'html2canvas';


class ScreenshotContainer extends Component {
    getScreenshotHandler = () => {
        let canvasArray = [];
        html2canvas(document.body).then(function (canvas) {
            console.log("[html2canvas then]" + canvas);
            canvasArray.push(canvas);
        })
        console.log("[Canvas Array value: ]" + canvasArray);
    }

    render() {
        return (
            <div className="ScreenshotsContainer">
                <button onClick={this.getScreenshotHandler}>Get Screenshot!</button>
            </div>
        );
    }
}
export default ScreenshotContainer;

A console.log() 显示 canvasArray 似乎是空的，即使在推送中收到 HTMLCanvasElement 也是如此。我做错了什么？

Answer 1

尝试这样的事情：

import React, { Component } from 'react';
import html2canvas from 'html2canvas';


class App extends Component {
  constructor(props) {
    super(props);
    this.state = { canvasArray: [] };
    this.captureRef = React.createRef();
  }

  getScreenshotHandler = () => {
    html2canvas(this.captureRef.current).then(canvas =>
      this.setState({ canvasArray: canvas }),
    );
  };

  render() {
    console.log(this.state.canvasArray); // <= you'll have your canvas el there...
    return (
      <div>
        <div ref={this.captureRef} />
        <button onClick={this.getScreenshotHandler}>Get Screenshot!</button>
      </div>
    );
  }
}

export default App;

将 html2canvas canvas 对象存储到数组

Storing html2canvas canvas object to array

html2canvas

reactjs