react 網頁截圖

用到的插件html2canvas  http://html2canvas.hertzen.com/

確實如官方介紹那麼簡單

 需要注意的是，在antd中Modal組件直接獲取id是拿不到DOM的，需要用className,代碼示例如下

import React, { Component } from "react";
import html2canvas from "html2canvas";
import { Modal, Button } from "antd";
import "antd/dist/antd.css";

export default class HtmlCrop extends Component {
  constructor(props) {
    super(props);
  }
  click = () => {
    alert(1);
    // 整個modal
    const n = document.getElementsByClassName("aa")[0];
    const a = document.getElementById("a");

    html2canvas(n).then(canvas => {
      const imgUrl = canvas.toDataURL();
      // 獲取截圖base64 
      console.log(imgUrl);
    });
  };
  render() {
    return (
      <Modal
        className="aa"
        visible={true}
      >
        <h1 id="a">aaaaa</h1>
        <h2 id="b">bbbbb</h2>
        <Button onClick={this.click}>點擊截圖</Button>
      </Modal>
    );
  }
}