Question

美好的一天！

我是React和html2canvas的新手。我正在制作一个应用程序，该应用程序将使用html2canvas来获取DOM的“屏幕截图”，然后将其存储到一系列屏幕截图中，然后还将这些屏幕截图呈现在屏幕上。

我将将从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组件将映射数组，并将每个画布对象传递给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

这个特定的库以特定的方式工作（看起来它在幕后做了很多“魔术”-您应该查看源代码here，更具体地说是src内的renderer文件夹）

将画布保存到数组内部的状态（正确的反应方式）将是一个问题，因为它将画布保存为具有许多方法等复杂对象，而我们无法渲染对象...这个库不是在考虑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>
    );
  }
}

链接到实时演示：https://codesandbox.io/s/1r213057vq

渲染从道具收到的画布对象

1 个答案: