html2canvas 截图功能

1.安装 html2canvas

npm i -D   html2canvas

2.文件中使用

//html代码


  

点击生成图片

//js代码
// 引入html2canvas
import html2canvas from 'html2canvas'

// 注册组件
components: {
  html2canvas
},

data () {
  return {
    htmlUrl: ''    // 存放生成图片的地址
  }
},


methods: {
  // 页面元素转图片
    toImage () {
      this.$indicator.open({
          text: '正在生成图片...',
          spinnerType: 'fading-circle'
      });
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      html2canvas(this.$refs.imageDemo, {
        backgroundColor: null,   //设置截图的背景色
　　　　 useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
        allowTaint: false, //允许跨域（图片跨域相关）
        taintTest: true, //是否在渲染前测试图片
      }).then((canvas) => {
        let url = canvas.toDataURL('image/png')
        this.htmlUrl = url
        setTimeout(() => {
            this.$indicator.close();
            this.$toast({
                message: '图片已生成，长按保存分享给你的好友吧',
                position: 'middle',
                duration: 3000
            });
        }, 500)
      })
    },
}

遇到的问题：

1.生成的图片空白
问题描述：在列表页面，根据不同的商品ID生成对应的截图，截图空白或错位的问题
解决办法:设置canvas的宽高

//html文件


  
  根据循环的列表生成不同的内容，即对应索引的 item 内容


     

    
     点击生成图片
    

//js文件
toImage (item) {
    this.goodsDetail=item;   // 要动态获取内容
    //生成图片
    this.$indicator.open({
        text: '正在生成图片...',
        spinnerType: 'fading-circle'
    });

    setTimeout(()=>{   // 因为要动态获取内容，所以加了一个定时器
        // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
        html2canvas(this.$refs.imageDom, {
            useCORS: true, //（图片跨域相关）
            allowTaint: false, //允许跨域（图片跨域相关）
            taintTest: true, //是否在渲染前测试图片
            width:window.screen.availWidth,     //显示的canvas窗口的宽度
            height:window.screen.availHeight,    //显示的canvas窗口的高度
            windowWidth:document.body.scrollWidth,   // 获取X轴方向滚动条中的内容
            windowHeight:document.body.scrollHeight,   // 获取Y轴方向滚动条中的内容
            x:0,   // 页面在X轴上没有滚动，故设为0
            y:window.pageYOffset,   // 页面在垂直方向的滚动距离
        }).then((canvas) => {
            ......
    },2000)

},

2.生成的图片需带有二维码

• 安装 qrcanvas

npm i -D qrcanvas

• 页面中使用

toImage (item) {
    this.goodsDetail=item;   // 要动态获取内容

    //生成二维码
    let codeUrl='www.baidu.com'   //二维码地址url地址
    var canvas1 = qrcanvas({
        data: decodeURIComponent(codeUrl),
        size: 90
    });
    document.getElementById("qrcode").innerHTML = '';
    document.getElementById('qrcode').appendChild(canvas1);
    //合成分享图
    this.$indicator.open({
        text: '正在生成图片...',
        spinnerType: 'fading-circle'
    });

    //截图
    setTimeout( ()=>{
       ......
    },2000)
},