qrcode和html2canvas结合实现带文字二维码图片

实习公司有个需求前端生成二维码传给后端，百度之后，使用了qrcode做的

  state.qrcode = new QRCode(proxy.$refs.qrCodeUrl, {
  //如果你添加的中文内容，微信扫出来是查看不了的
    text: 'https://www.baidu.com',// 二维码承载信息 跳转路由信息 pages/peopleEvaluation/peopleEvaluation
    width: 150,
    height: 150,
    colorDark: '#000000',
    colorLight: '#ffffff',
    correctLevel: QRCode.CorrectLevel.H,// 容错级别
    toSJISFunc: QRCode.toSJIS
  },)

注意如果你引入qrcode报错，那么可以用qrcodejs2-fix

import QRCode from 'qrcodejs2-fix'

后来又提出需求，二维码顶部和底部都有相关文字信息，网上查了一下用html2canvas可以做

<div id="poster">
   <div class="text-top text">{{qrCodeform.depCodeWindow }}</div>
   <div class="qr-code" ref="qrCodeUrl"></div>
   <div class="text-bottom text">{{ qrCodeform.depCodeName }}</div>
 </div>

import html2canvas from 'html2canvas'

  html2canvas(document.querySelector('#poster')).then((canvas) => {
    let posterImage = canvas.toDataURL('image/png');
    console.log(posterImage);
    //因为我要上传到后台服务器，所以这里把base64转为二进制流
    let arr = posterImage.split(",")
    let mime = arr[0].match(/:(.*?);/)[1];
    let bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    let formData = new FormData()
    formData.append("multipartFile", new File([u8arr], "二维码.png", { type: mime }))
    upload(formData).then(res => {
      qrCodeform.depCodeUrl = res.data.data
    })
      .finally(() => {
      //清除二维码
        proxy.$refs.qrCodeUrl.innerHTML = ''
      })
  })