Javascript 渲染从道具接收的画布对象

你好

我是一个新的反应和html2canvas。我正在制作一个应用程序，它将使用html2canvas获取我的DOM的“屏幕截图”，然后将其存储到一个屏幕截图数组中，然后这些屏幕截图也将呈现在屏幕上

我将从html2canvas promise接收到的每个

对象存储到一个数组中，然后将其传递给我的

ScreenshotsContainer

组件，该组件将数组传递给

Screenshots

组件。

屏幕截图

组件将把

对象数组映射到单个

屏幕截图

组件

在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;

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;

import React，{Component}来自'React'；
从“./containers/ScreenshotsContainer/ScreenshotsContainer”导入屏幕快照容器
从“html2canvas”导入html2canvas；
导入“/App.css”；
类应用程序扩展组件{
状态={
画布数组：[]
}
getScreenshotHandler=（）=>{
log（“[Canvas Array from state length:”+this.state.canvasArray.length）
让canvasArray=this.state.canvasArray；
html2canvas（document.body）.then（（canvas）=>{
canvasArray.push（画布）
});
log（“[Canvas对象值：”+canvasArray）；
this.setState（{canvasArray:canvasArray}）
}
render（）{
返回(
截图
);
}
}
导出默认应用程序；

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;

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，{Component}来自'React'；
导入“./ScreenshotsContainer.css”
从“../../components/Screenshots/Screenshots”导入屏幕截图；
类ScreenshotsContainer扩展组件{
render（）{
返回(
);
}
}
导出默认屏幕快照容器；

屏幕截图组件将映射数组并将每个画布对象传递给屏幕截图组件：

    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;

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，{Component}来自'React'；
从“./Screenshot/Screenshot”导入屏幕截图；
类截图扩展了组件{
render（）{
const screenshots=this.props.canvasArray.map（canvas=>{
返回(
)
})
返回(
{截图}
);
}
}
导出默认屏幕截图；

这是屏幕截图组件

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;

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;

从“React”导入React；
导入“/Screenshot.css”；
常量屏幕截图=（道具）=>(
);
导出默认屏幕截图；

按下按钮时实际得到的信息：

---

我想知道哪一部分出错了。任何帮助都将不胜感激。

此特定库以特定的方式工作（看起来它在幕后发挥了很多“魔力”——您应该更具体地查看源代码，即src中的renderer文件夹）

将画布保存到数组内部的状态（正确的处理方式）将是一个问题，因为它将画布保存为具有许多方法等的复杂对象。。。我们不能渲染对象。。。写这个lib时没有考虑到React

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

这里有一个现场演示：

import React，{Component}来自'React'；
从“html2canvas”导入html2canvas；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.captureRef=React.createRef（）；
this.displayRef=React.createRef（）；
}
getScreenshotHandler=（）=>{
html2canvas（this.captureRef.current）。然后（canvas=>
此.displayRef.current.appendChild（画布），
);
};
render（）{
返回(
此enitre div将被捕获并添加到屏幕中
截图！
您的屏幕截图将在下面提供
);
}
}
导出默认应用程序；

编辑：根据下面的评论，这里还有另一个解决方法：

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>
    );
  }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={canvasArray:[]}；
this.captureRef=React.createRef（）；
}
getScreenshotHandler=（）=>{
html2canvas（this.captureRef.current）。然后（canvas=>
这是我的国家({
canvasArray:[canvas.toDataURL（），…this.state.canvasArray]，
}),
);
};
renderCanvas=（）=>{
返回此.state.canvasArray.map（（canvas，i）=>{
返回；
});
};
render（）{
返回(
这个埃尼特师将被抓获

截图！
您的屏幕截图将在下面提供：
{this.renderCanvas（）}
);
}
}

---

现场演示链接：

您好，先生，您好。我找到了一个解决方法并使用了toDataURL，我将其存储到一个状态数组中，将其作为道具传递，然后将其呈现为一个属性。然而，你的例子却完美无瑕。谢谢