html2canvas 实现dom转png

首先:npm install vue-html2canvas
在需要的页面 : import html2canvas from “html2canvas”;
使用中:

     this.$nextTick(() => {
        let dom = this.$refs.imageWrapper.$refs.inviteInfo;
        html2canvas(dom, {
          useCORS: true,  //跨域
          logging: false,
          allowTaint: false,
          width: dom.offsetWidth, //设置canvas尺寸与所截图尺寸相同,防止白边
          height: dom.offsetHeight //防止白边
        }).then(canvas => {
          let dataURL = canvas.toDataURL("image/png");
          this.dataURL = dataURL;  //需要填充的src
        });
      });

用户展示的分享图片:

实际用户保存的图片:

你可能感兴趣的:(Vue)