Хранение объекта холста html2canvas в массив - PullRequest
Новая
       9

Хранение объекта холста html2canvas в массив

0 голосов
/ 18 января 2019

Я довольно новичок в React. Я играю с React и html2Canvas. То, что я пытаюсь сделать, это использовать html2canvas для захвата «скриншотов» моей страницы, но я хотел бы сделать так, чтобы я сохранял все свои скриншоты в массиве canvas, чтобы я мог передать их компоненту и отобразить каждый объект холста в отдельном компоненте.

Сейчас я выводлю массив canvas, который выдвигает каждый объект canvas из then () обещания html2canvas. Код ниже: 

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;

console.log () показывает, что canvasArray кажется пустым, даже когда HTMLCanvasElement получен в push-сообщении. Что я делаю не так?

1 Ответ

0 голосов
/ 18 января 2019

Попробуйте что-то вроде этого: 

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