vue中使用html2canvas和qrcanvas配合

1.第一步，装插件

安装html2canvas ： npm install html2canvas --save
安装qrcanvas： npm i qrcanvas

2.在需要使用的页面上引入

import html2canvas from ‘html2canvas’
import qrcanvas from ‘qrcanvas’;

3.准备好html盒子

<template>
  <div>
  	//  imageWrapper 截图区域
    <div class="imageWrapper" ref="imageWrapper">
        <img class="imgs" src="../assets/bg.jpeg" alt="">
        <img class="imgs" src="../assets/bg.jpeg" alt="">
        <img class="imgs" src="../assets/bg.jpeg" alt="">
        <slot></slot>
        // 二维码盒子 先隐藏
        <div id="qrcode" v-show="isshow"></div>
    </div>
      <h1 @click="copys">点击截图</h1>
      // jt 截取的图片 先让隐藏
      <img id="jt" v-show="jttype"  :src="jtu" alt="">
  </div>
</template>

// 部分代码省略 控制元素
 data () {
    return {
      dataURL:"", // 截取的图片的路径地址
      isshow:false, // 隐藏二维码
      jttype:false, // 隐藏截图
      jtu:''
    }
  },
  

4.点击复制事件

	//  完整模版渲染之后，再去加载二维码
  mounted() {
    // 二维码生成
    this.$nextTick(()=> {
          var canvas = qrcanvas({
              data: "填入你想二维码展示的内容", //二维码内容
              size:80 //二维码大小
          });
          document.getElementById("qrcode").innerHTML = '';
          document.getElementById('qrcode').appendChild(canvas);
      })
  },
  methods: {
    copys(){
      this.isshow = true
    // 生成图片
    this.$nextTick(()=>{
    	// 加入定时器，作用为了保证点击之后，图片能加载完整
        setTimeout(()=>{
          html2canvas(this.$refs.imageWrapper,{
          	// 以下是设置截图的样式，以保证达到需求
            backgroundColor: "#fff", // 背景颜色
            useCORS:true,  // 保证跨域图片显示
            width:window.screen.availWidth, //canvas 窗口宽度
            height:window.screen.availHeight, // canvas 窗口高度
            windowWidth:document.body.scrollWidth, // 获取x方向滚动条内容
            windowHeight:document.body.scrollHeight, // 获取y方向滚动条内容
            x:0,  // 页面水平方向滚动距离
            y:window.pageXOffset // 页面在垂直方向的滚动距离
          }).then((canvas) => {
              let url = canvas.toDataURL("image/png");
              this.jtu = url
              this.jttype = true
          });
        },500)
      })
    }
  },
  
  // 下面就是一些样式了
<style scoped>

  .imgs{
    width: 375px;
  }
  .imageWrapper{
    position: relative;
  }
  #qrcode{
    position: absolute;
    right: 10px;
    top: 120px;
  }
  #jt{
    position: fixed;
    top: 0;
    width: 375px;
    height: 667px;
    z-index: 999;
  }
</style>

上面代码主要达到的效果就是：点击截图，生成二维码，截取屏幕指定区域的内容

以上就是关键代码了，如有问题，还请指出！！！