qrcodejs2+html2canvas生产二维码海报vue

npm install --save qrcodejs2
npm install --save html2canvas

      

        
        

          
扫码关注旗帜
          

            

          
        
      
      
    

import QRCode from ‘qrcodejs2‘
import html2canvas from ‘html2canvas‘
export default {
  data () {
    return {
      isQRCode: true,
      imgUrl: ‘‘
    }
  },
  mounted () {
    this.qrcode(‘https://img0.baidu.com/it‘)
  },
  methods: {
    /* 扫码签名 */
    qrcode (text) {
      // 生成二维码
      let qrcode = new QRCode(‘qrcode‘, {
        width: 150,
        height: 150
      })
      qrcode.makeCode(text)
      this.clickGeneratePicture()
    },
    /**
    * 将页面指定节点内容转为图片
    * 1.拿到想要转换为图片的内容节点DOM；
    * 2.转换，拿到转换后的canvas
    * 3.转换为图片
    */
    clickGeneratePicture () { // 生成图片
      // var canvas = document.createElement(‘canvas‘)
      // canvas.getContext(‘2d‘).scale(1, 1)
      html2canvas(this.$refs.imageDom).then(canvas => {
        // 转成图片，生成图片地址
        this.isQRCode = false
        this.imgUrl = canvas.toDataURL(‘image/png‘) // 可将 canvas 转为 base64 格式
      })
    }
  }
}