vue html2canvas 实现网页保存图片

1、导入库

npm install --save html2canvas

npm install --save  js-qrcode

1-1生产 二维码 qrcode 图片

//制作二维码

makeCode(text) {

       let dom = this.$refs.code;

          var qr = new QRCode(dom, { width: 138, height: 138 });

          qr.make(text);

}, 

1-2、生产截图

//生成图片1 makeUpShareImg() {

this.$refs.shareImgLogo.style.display = "";

let table = this.$refs.shareImgLogo;

html2canvas(table,{logging:false}).then(canvas => {

               var url = canvas.toDataURL("image/jpeg");

               document.getElementById("exportQrImg").src = url;

               this.$refs.shareImgLogo.style.display = "none";

});

}

最后附上  ui

生成二维码截图的ui