h5截屏 html2canvas截图

需求：h5页面弹窗展示的dom和长按保存到手机的图片不一样，保存下来的带二维码
思路：弹窗展示一个dom，用canvas插件针对另外一个弹窗内容（透明度不为0，放到展示弹窗的下层），生成一个img放到弹窗的上层  opacity设置为0即可。

代码如下：

 this.imgRef = React.createRef();

 state 中存放img

　
 getBase64Image = (url, callback, outputFormat) => {
    var canvas = document.createElement('CANVAS'),
      ctx = canvas.getContext('2d'),
      img = new Image();
    img.crossOrigin = '';
    img.onload = (res) => {
      canvas.height = img.height;
      canvas.width = img.width;
      ctx.drawImage(img, 0, 0);
      var dataURL = canvas.toDataURL(outputFormat || 'image/png');
      this.setState({
        img: dataURL,
      }, () => {
        this.createPicture();
      })
      canvas = null;
    };
    img.src = `${url}?timeStamp=${+new Date()}`;
  }

  createPicture = () => {
    const scale = this.getPixelRatio();
    // 获取要转换的元素
    html2canvas(this.imgRef.current, {
      scale: scale,
      useCORS: true, // 开启跨域设置，需要后台设置cors
    }).then((canvas) => {
      // toDataURL函数生成img标签的可用数据  图片格式转成 base64
      let dataURL = canvas.toDataURL("image/png");
      this.setState({
        share_image: dataURL,
        canvasImgOnLoad: true,
      });
    });
  };

 getPixelRatio = () => {

    if (window.devicePixelRatio && window.devicePixelRatio > 1) {

      return window.devicePixelRatio;

    }

    return 1;

  };

　　{/* 隐藏的弹窗 */}

          <Modal

            transparent

            visible={show_share_hide_modal}

            onClose={this.close_share}

            wrapClassName="member_center_share_modal"

            maskTransitionName='hide'

          >

            <div className="pos-r main_back_color pb24" ref={this.imgRef} >

              <main>

                <header>

                  <img src={modal_back} alt="" />

                </header>

                <figure className="middle_figure c-bg-fff radius24">

                  <div>

                    <img className="share_modal_left pos-a" src={share_modal_left} alt="" />

                    <img className="share_modal_level_img pos-a" src={img} alt="" />

                    <img className="share_modal_right pos-a" src={share_modal_right} alt="" />

                    <img src={share_modal_name_img} alt="" className="share_modal_bottom pos-a" />

                  </div>

            

                </figure>

                <div className="code_share_footer radius16 pl32 mlr0 " >

                  <>

                    <QRCode

                      className={"qr_code_img"}

                      value={window.location.origin + '/#/chou/my/member_center?fr=member_center_htzrwzx_ewm'}

                      size={size}

                      fgColor="#000000"

                      bgColor="#F7F7F8"

                    />

                    <div className="code_title_box tl">

                      <div>

                      

                        <p className={'fs28 ff-pfr fw-4 c-272A2A code_sub_title'}>长按或者扫描二维码</p>

                      </div>

                      <img src="https://p4.nicaifu.com/hz/3c33a49a2c3c94fa15f9c81741460e22.png" alt="" className="code_img" />

                    </div>

                  </>

                </div>

              </main>

            </div>

          </Modal>

　　　　

 <Modal

            transparent

            visible={show_share_modal}

            onClose={this.close_share}

            wrapClassName="member_center_share_modal"

            maskTransitionName='hide'

          >

            {show_loading && <Loading></Loading>}

            <div className="pos-r main_back_color pb24" >

              {share_image && (

                <img className={`show_img pos-a `} onLoad={this.handleImageLoaded} src={share_image} alt="" />

              )}

              <main>

                <header>

                  <img src={modal_back} alt="" />

                </header>

                <figure className="middle_figure c-bg-fff radius24">

                  <div>

                    <img className="share_modal_left pos-a" src={share_modal_left} alt="" />

                    <img className="share_modal_level_img pos-a" src={img} alt="" />

                    <img className="share_modal_right pos-a" src={share_modal_right} alt="" />

                    <img src={share_modal_name_img} alt="" className="share_modal_bottom pos-a" />

                  </div>

                

                </figure>

                <div className="code_share_footer radius16 pl24 mlr0 ">

                  <div className={`'zIndex' code_title_box tl`}>

                    <div className='code_title_box_left'>

                      <p className={'fs28 ff-pfr fw-4 c-272A2A  code_title'}>长按图片，保存到手机</p>

                      <p className={'fs28 ff-pfr fw-4 c-272A2A code_sub_title'}>或点击右上角“...”分享你的成就</p>

                    </div>

        

                  </div>

                </div>

              </main>

            </div>

          </Modal>