html2canvas неправильно показывает элементы формы - PullRequest
Новая
       7

html2canvas неправильно показывает элементы формы

0 голосов
/ 13 марта 2019

Я использую React и Html2Canvas для захвата формы нажатием кнопки.Форма имеет четыре select узла.Html2Canvas сохраняет форму как изображение, но выделенные элементы внутри отображают первую опцию в отображаемом изображении.Мне интересно, если я настроил это неправильно либо в конфиге html2canvas, либо в реакции.

let options = {
  async: true,
  foreignObjectRendering: true,
  logging: false
};
let input = this.iceBreaker.current;
html2canvas(input, options).then(canvas => {
  if (canvas) {
    this.setState({
      imageRef: canvas.toDataURL('image/png')
    });
  }
});

При нажатии кнопки imageRef загружается в формате PNG.Обратите внимание, что даже добавление div к телу показывает ту же проблему (по этой причине я не прикреплял никакой другой код).Любое понимание будет с благодарностью.Спасибо!

1 Ответ

1 голос
/ 13 марта 2019

Вот, пожалуйста, должно быть достаточно ясно ... 

class App extends React.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} className="to-capture">
          <p>
            This enitre <code>div</code> 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

...