vue中使用html2canvas生成海报

1.安装依赖

npm install --save html2canvas

2.在需要的页面引入

import html2canvas from "html2canvas"

3.script里的代码

import html2canvas from "html2canvas"export default {  name: 'promote',  data() {    return {      invitationInfo: {},//获取到的二维码数据      htmlUrl:'',//转为图片（div里的内容转图片）      show:false,//组件弹窗控制      isBtnShow:true,//点击按钮是否显示      height:''//dom高度    }  },  components:{//引用的vant-vue里的组件   [Button.name]: Button,   [Overlay.name]: Overlay,   [Icon.name]: Icon,   [Loading.name]: Loading  },  created() {    this.getInvitationCode()  },  mounted(){  },  methods: {    close(){      this.isBtnShow=false    },    getImg(){      this.show=true      this.isBtnShow=false      setTimeout(()=>{        this.isBtnShow=true         this.setImage()      },100)    },    async setImage () {      let dom=document.getElementById("imgUrl")      window.pageYoffset = 0;       document.documentElement.scrollTop = 0;//如果要转换的dom高度大于屏幕高度，能保证从最顶部开始转图片      document.body.scrollTop = 0;//如果要转换的dom高度大于屏幕高度，能保证从最顶部开始转图片      var width = dom.offsetWidth; //dom宽      var height = dom.offsetHeight; //dom高      var scale = 2; //放大倍数      await html2canvas(dom,{          backgroundColor: null,          useCORS: true, // 允许图片跨域          allowTaint:false,          scale:scale,          dpi: window.devicePixelRatio * 2,          width: width,          heigth: height,          // taintTest: true, // 在渲染前测试图片          timeout:1000 // 加载延时        }).then(canvas => {          this.htmlUrl = canvas.toDataURL("image/jpg");        });      },      getInvitationCode() {//获取到接口的二维码      this.$post('二维码的接口地址').then(res => {        console.log(res)        if (res.code) {          Toast(res.msg)          return false        }        this.invitationInfo = res.data      })    }    }}</script>

4.html代码

<div class="promote-bg" ref="imageTofile" id="imgUrl">  <img src="../../assets/images/pull-new-bg.png" alt="">  <div class="code-bg">    <img src="../../assets/images/pull-new-code.png" alt="">    <div class="code">      <img :src="invitationInfo.qrcode_wx" alt="二维码" >      <p>长按识别二维码</p>    </div>    <div class="wx-code">      <p>邀请码</p>      <p class="invitation-code">{{ invitationInfo.inv_code }}</p>    </div>  </div>  <van-button type="primary" class="saveImg" v-if="!isBtnShow">长按可保存图片</van-button></div><van-button type="primary" block @click="getImg" class="setImg">生成海报</van-button>  <van-overlay :show="show">  <div class="wrapper" @click.stop>    <img :src="htmlUrl" alt="" style="width:100%;height:100%" crossOrigin="anonymous" >    <van-icon name="close" class="close" @click="show=false"/>  </div></van-overlay>