渲染从 props 接收到的 canvas 对象

Question

美好的一天！

我是 React 和 html2 的新手canvas。我正在制作一个应用程序，它将使用 html2canvas 获取我的 DOM 的 "screenshots"，然后将其存储到一组屏幕截图中，这些屏幕截图随后也会呈现在屏幕上。

我将从 html2canvas 承诺接收到的每个 <canvas> 对象存储到一个数组，然后将其传递到我的 ScreenshotsContainer 组件，该组件将数组传递到 Screenshots零件。然后 Screenshots 组件会将 <canvas> 对象的数组映射到单个 Screenshot 组件。

在 App.js 中，我正在调用 html2canvas 函数，然后将数组传递给 ScreenshotsContainer 组件

import React, { Component } from 'react';
import ScreenshotsContainer from './containers/ScreenshotsContainer/ScreenshotsContainer'
import html2canvas from 'html2canvas';

import './App.css';

class App extends Component {
  state = {
    canvasArray: []
  }

  getScreenshotHandler = () => {
    console.log("[Canvas Array from state length:]" + this.state.canvasArray.length)
    let canvasArray = this.state.canvasArray;

    html2canvas(document.body).then((canvas) => {
      canvasArray.push(canvas)
    });

    console.log("[Canvas Object value: ]" + canvasArray);
    this.setState({ canvasArray: canvasArray })

  }

  render() {

    return (
      <React.Fragment>
        <button onClick={this.getScreenshotHandler}>Get Screenshot</button>
        <ScreenshotsContainer canvasArray={this.state.canvasArray} />
      </React.Fragment>
    );
  }
}

export default App;

ScreenshotsContainer 组件会将接收到的数组传递给 Screenshots 组件：

    import React, { Component } from 'react';
import './ScreenshotsContainer.css'
import Screenshots from '../../components/Screenshots/Screenshots';

class ScreenshotsContainer extends Component {

    render() {
        return (
            <div className="ScreenshotsContainer">
                <Screenshots canvasArray={this.props.canvasArray} />
            </div>
        );
    }
}
export default ScreenshotsContainer;

Screenshots 组件将映射数组并将每个 canvas 对象传递给 Screenshot 组件：

import React, { Component } from 'react';
import Screenshot from './Screenshot/Screenshot';

class Screenshots extends Component {
    render() {
        const screenshots = this.props.canvasArray.map(canvas => {
            return (
                <Screenshot
                    key={Math.random}
                    canvasObj={canvas}
                />
            )
        })
        return (
            <React.Fragment>
                {screenshots}
            </React.Fragment>
        );
    }
}
export default Screenshots;

这里是截图组件

import React from 'react';
import './Screenshot.css';

const screenshot = (props) => (
    <div className="Screenshot" >
        <canvas ref={props.canvasObj} style={{
            width: '10%',
            height: '10%'
        }} />
    </div>
);

export default screenshot;

按下按钮时实际得到的结果：

Actual screenshot of my result 我想知道是哪一部分出了问题。任何帮助将不胜感激。

Answer 1

这个特定的库以特定的方式工作（看起来它在幕后做了很多 "magic" - 您应该查看源代码 here 更具体地说是 src 中的渲染器文件夹）

将 canvas 保存到数组内部的状态（正确的反应做事方式）将是一个问题，因为它将它保存为具有许多方法等的复杂对象......我们可以不渲染对象...这个库不是为 React 编写的...

下面的代码示例是 React 中的一个简单实现...

这是一个现场演示：https://codesandbox.io/s/9y24vwn1py

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

class App extends Component {
  constructor(props) {
    super(props);
    this.captureRef = React.createRef();
    this.displayRef = React.createRef();
  }

  getScreenshotHandler = () => {
    html2canvas(this.captureRef.current).then(canvas =>
      this.displayRef.current.appendChild(canvas),
    );
  };

  render() {
    return (
      <div>
        <div ref={this.captureRef}>
          <h2>This enitre div will be captured and added to the screen</h2>
        </div>
        <button onClick={this.getScreenshotHandler}>Get Screenshot!</button>
        <section>
          <h5>Your screenshots will be availbale below</h5>
          <div ref={this.displayRef} />
        </section>
      </div>
    );
  }
}

export default App;

编辑：根据下面的评论，这是另一种解决方法：

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.toDataURL(), ...this.state.canvasArray],
      }),
    );
  };

  renderCanvas = () => {
    return this.state.canvasArray.map((canvas, i) => {
      return <img key={i} src={canvas} alt="screenshot" />;
    });
  };

  render() {
    return (
      <div className="wrapper">
        <div ref={this.captureRef}>
          <p>This enitre div will be captured</p>
        </div>
        <button onClick={this.getScreenshotHandler}>Get Screenshot!</button>
        <section>
          <h5>Your screenshots will be availbale below:</h5>
          {this.renderCanvas()}
        </section>
      </div>
    );
  }
}

Link 现场演示：https://codesandbox.io/s/1r213057vq

渲染从 props 接收到的 canvas 对象

Rendering a canvas object received from props

javascript

html2canvas

reactjs