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过来

 

posted @ 2022-03-03 14:43  light丶  阅读(468)  评论(0)    收藏  举报