vue把demo生成图片

1.在vue命令行下载依赖

npm install --save html2canvas

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

  import html2canvas from "html2canvas";

3.在demo上添加ref 使其变成 我要转化为图片的区域

 

 

 表示，我只要截取这个Div里面的内容变成图片

4.在js里写入，

  //生成海报，这里使用定时器是因为，如果里面有动态的值，或图片，要等渲染完成后，进行截图
  setTimeout(() => {
     this.imgs();
  }, 1000)

 

      imgs() {
        //把refs叫imgContainer的demo下的生成图片
        html2canvas(this.$refs.imgContainer, {
          // 转换为图片
          useCORS: true, // 解决资源跨域问题
          timeout: 500, // 加载延时
        }).then(canvas => {
          console.log(canvas, 'canvas');
          let dataURL = canvas.toDataURL('image/png');
            //生成的图片
          this.poster = dataURL;
        });
      }

 注，如果demo里的图片，使用的是后台传过来的路径图片，可能会报跨域问题

　　1、让后台配置一下跨域问题

　　2、让后台把图片传成bas64过来