html2canvas页面截图分享

原创已于 2022-03-15 14:08:36 修改 · 177 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #css #开发语言

收录于

于 2021-04-29 14:37:08 首次发布

本文介绍如何利用html2canvas库将网页内容截图，并结合二维码展示，包括设置跨域配置、允许污染和渲染测试等关键步骤，旨在实现扫码成为联营商的功能。

下载引入html2canvas

 <img :src="imgsrc" alt="" crossOrigin="anonymous">
<div class="qr-box" ref='imageWrapper'>

        <div  style="background: #fff;">

            <img :src='require("../../../assets/img/shopShare.jpg")' />

            <div id="qrCode" ref="qrCodeUrl">

              <img :src="qrurl" alt="" style="width:200px;height:200px">

            </div>

            <div>扫码成为联营商</div>

            <div>超多爆款 &nbsp;&nbsp; 轻松赚钱</div>

            <div style='width:100%;height:80px'></div>

        </div>

    </div>



html2canvas(this.$refs.imageWrapper, {
          backgroundColor: null,

          useCORS: true, // 开启跨域配置

          allowTaint: true, // 允许跨域图片
          imageTimeout:0,
          taintTest: true, // 是否在渲染前测试图片
        }).then((canvas) => {
          
           let dataURL = canvas.toDataURL('image/jpeg', 2.0)
          
         
            this.imgsrc=dataURL
          this.loadingInstance.close()
           
        })