基于Vue实现html2Canvas与QRCode.js2生成带有二维码的海报

一、业务

一篇文章，点击转发输入姓名以及手机号后生成一个二维码图片，随后点击下载图片，将图片分享给别人

二、结果

点击下载后的二维码

三、实现

html部分

<!-- 生成二维码以及文案的弹框 -->
    <div class="qrcode-template" v-show="showTransferUrlDialog">
      <div class="dialog-bind-alipay1">
	      <div class="main">
          <div ref="dialog" class="qrcode-template">
            <div class="title">点击下载二维码保存，分享给好友：</div>
            <div id="qrCodeDiv" ref="qrCodeDiv" style="margin: 0 auto;"></div>
            <div class="url-text" style="margin: 0 auto;"><span>扫一扫二维码，立即xxx</span></div>
          </div>
	      	<button class="btn" @click="cancel">确定</button>
          <button class="btn" @click="downloadBtn">下载二维码</button>
	      </div>
      </div>
    </div>

 js部分

安装依赖这里不做介绍，如果安装失败可以直接将以下代码放入package.json依赖中

"qrcodejs2": "0.0.2",

"html2canvas": "^1.0.0-rc.7"

// 引入插件
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'

methods: {
    getQrcode () {
      this.$refs.qrCodeDiv.innerHTML = ''
      new QRCode(this.$refs.qrCodeDiv, {
        width: 150,
        height: 150,
        text: this.TransferUrl,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
      this.createQrCodePic()
    },
    createQrCodePic () {
      this.showTransferUrlDialog = true
    },
    downloadBtn() {
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      html2canvas(this.$refs.dialog, { 
        useCORS: true,  //设置为true，避免图片产生跨域
        allowTaint: false,
        scale: 1.5,
        backgroundColor: null
      }).then(canvas => {
        let dataURL = canvas.toDataURL('image/png')
        // 下载图片
        var link = document.createElement('a')
        link.href = dataURL
        link.download = 'download.png'
        setTimeout(function () {
          link.click()
        }, 1000)
      })
    },
}

 

代码中这三句很重要，因为在h5中，长的内容会出现滚动条，使用html2canvas截图，如果出现滚动条，那么截图会生成空白图片。所以使用原生js设置定位回到窗口顶部

window.pageYOffset = 0;

document.documentElement.scrollTop = 0

document.body.scrollTop = 0