记录 生成二维码canvas 并且截取指定html元素转换为截图

错误案例 （元素没有弄成固定fixed定位，当屏幕过小时，超过1屏有滚动，可能导致只能截图到部分。并且注意指定的html容器元素在被转换时，是否已经挂载完毕）

  componentDidMount() {
    html2canvas(document.getElementById("#capture"), {
      useCORS: true,
      width: window.screen.availWidth,
      height: 532,
      windowWidth: document.body.scrollWidth,
      windowHeight: document.body.scrollHeight,
      x: 0,
      y: window.pageYOffset,
    }).then(canvas => {
      // document.body.appendChild(canvas);
      let dataImg = canvas.toDataURL();
      console.log('this.base64 dataImg===>canvas:', this.dataImg, canvas);

      this.newImgBase64 = dataImg;
      console.log('canvas===>:', canvas);
    });
  }

正确案例 

componentDidMount() {
    window.handleScreenCatch = (width, height, windowWidth, windowHeight, x, y) => {
      var u = navigator.userAgent;
      let options = {}
      if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
        //安卓手机

      } else if (u.indexOf('iPhone') > -1) {
        //苹果手机
        options = {
          useCORS: true,
          allowTaint: true,
          width: width || window.screen.availWidth,
          height: height || window.screen.availHeight,
          windowWidth: windowWidth || document.body.scrollWidth,
          windowHeight: windowHeight || document.body.scrollHeight,
          x: x || 0,
          y: y || window.pageYOffset,
        }
      } else if (u.indexOf('Windows Phone') > -1) {
        //winphone手机
        options = {
          useCORS: true,
          allowTaint: true,
          width: width || window.screen.availWidth,
          height: height || window.screen.availHeight,
          windowWidth: windowWidth || document.body.scrollWidth,
          windowHeight: windowHeight || document.body.scrollHeight,
          x: x || 0,
          y: y || window.pageYOffset,
        }
      }

      html2canvas(document.getElementById("capture"), options).then(canvas => {
        let dataImg = canvas.toDataURL();
        this.newImgBase64 = dataImg;
        this.saveToAlbum(this.newImgBase64);
      });
    }
  }

 

完整代码

/* global APPID */
import React from 'react'
import { connect } from 'dva'
import { Flex, Button } from 'antd-mobile'
import LoadWrap from '@/components/LoadWrap'
import QRCode from 'qrcode.react'
import NavBar from '@/components/NavBar'
// import Bridge from '@/utils/bridge'
import styles from './qrcode.less'
import APIENV from '../env'
import $ from 'jquery';
import html2canvas from 'html2canvas';


@connect(({ signIn }) => ({
  detail: signIn.detail
}))
class QRCodePage extends React.Component {
  constructor(props) {
    super(props)
    this._inThisPage = true

    this.vid = props.location.query.id;

    if (this.vid) {
      props.dispatch({
        type: 'signIn/fetchDetail',
        payload: { vid: this.vid }
      })
    }

    this.canvas = React.createRef();

    this.handleBack = this.handleBack.bind(this)
  }

  componentDidMount() {
    window.handleScreenCatch = (width, height, windowWidth, windowHeight, x, y) => {
      var u = navigator.userAgent;
      let options = {}
      if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
        //安卓手机

      } else if (u.indexOf('iPhone') > -1) {
        //苹果手机
        options = {
          useCORS: true,
          allowTaint: true,
          width: width || window.screen.availWidth,
          height: height || window.screen.availHeight,
          windowWidth: windowWidth || document.body.scrollWidth,
          windowHeight: windowHeight || document.body.scrollHeight,
          x: x || 0,
          y: y || window.pageYOffset,
        }
      } else if (u.indexOf('Windows Phone') > -1) {
        //winphone手机
        options = {
          useCORS: true,
          allowTaint: true,
          width: width || window.screen.availWidth,
          height: height || window.screen.availHeight,
          windowWidth: windowWidth || document.body.scrollWidth,
          windowHeight: windowHeight || document.body.scrollHeight,
          x: x || 0,
          y: y || window.pageYOffset,
        }
      }

      html2canvas(document.getElementById("capture"), options).then(canvas => {
        let dataImg = canvas.toDataURL();
        this.newImgBase64 = dataImg;
        this.saveToAlbum(this.newImgBase64);
      });
    }
  }

  componentWillUnmount() {
    this._inThisPage = false
  }

  _downLoad = () => {
    window.handleScreenCatch();
  }

  handleBack() {
    if (this.props.location.query.backto === 'list') {
      this.props.history.push('/electric')
    } else {
      this.props.history.goBack();
    }
  }

  saveToAlbum = (imgBase64) => {
    // 图片预览, 可选参数 saveable：是否显示保存图片按钮， index: 多图情况下指定当前浏览的序号
    if (window.mbBridge && window.mbBridge.mb) {
      console.log('保存图片被触发了！！！', imgBase64);
      window.mbBridge.mb.saveImage(imgBase64);
    }
  }

  render() {
    const { detail, location } = this.props;
    const info = detail.data || {}
    const query = location.query;
    const src = `${APIENV}/down/app/signin/?name=${query.signInName}&num=${query.index || 1}&signInId=${query.signInId}#/`;

    return (
      <Flex direction="column" align="stretch" className={`${styles.qrcodePage} flex100`} style={{ overflow: 'auto' }}>
        <NavBar
          title="二维码展示"
          handleBack={this.handleBack}
        />

        <Flex.Item className={`${styles.column} flex100`} style={{ background: '#F6F6F6', paddingBottom: 30 }}>
          {/* <div id="capture" className={`${styles.capture}`}> */}
          <div id="capture" width={window.screen.availWidth} height="550" style={{ position: 'fixed', top: 80, left: '50%', marginLeft: -187 }}>
            <div className={`${styles.card} ${styles.column}`}>
              <div className={`${styles.column}`} style={{ alignItems: 'flex-start', padding: '25px 0px 0 0px' }}>
                <span className={`${styles.title}`}>{query.signInName}</span>
                <span className={`${styles.date}`}>{query.createAt}</span>
              </div>

              <div id="QR" style={{ padding: '30px 0 35px 0', alignItems: 'center' }} className={styles.column}>
                <QRCode id='qrid' value={src} onClick={this._downLoad} size={260} />
              </div>
              <span className={`${styles.noticeText}`} >请使用XX移动办公App扫描二维码签到</span>
            </div>
          </div>

          <div className={styles.saveBtn}>
            <div type="primary" className={styles.btnCss} onClick={this._downLoad}>保存到手机</div>
          </div>
        </Flex.Item>
      </Flex>

    );
  }

}

export default QRCodePage