html2canvas没有正确显示表单元素

Question

我正在使用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附加到正文也显示相同的问题（因为这个原因我没有附加任何其他代码）。任何见解将不胜感激。谢谢！

Answer 1

你走了：应该相当清楚......

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