H5生成二维码海报

1.产品需求,需要生成一个带参数的地址二维码,然后画到海报上

第一步绘制二维码
使用第三方控件

  <canvas id="canvas" width="530" height="760" v-show="false">
         浏览器版本太低,请更新浏览器
  </canvas>
  <img v-show="posterLoad" id="newimage" src="" style="width: 256px;height: 380px;">
  <div id="qrcode" style="display:none"></div>
  import QRCode from 'qrcodejs2'
  const rate = window.devicePixelRatio
  let qrcode = new QRCode('qrcode', { //qrcode 元素ID
               width: 150, // 二维码宽度
               height: 150, // 二维码高度
               text: 'https://www.baidu.com?id=111', // 二维码地址
               colorDark: "#000", // 二维码颜色1
               colorLight: "#fff",// 二维码颜色2
               correctLevel: QRCode.CorrectLevel.H // 容错等级
           })
  // 绘制之后,元素上会被添加一个canvas元素,和img元素

第二步,将二维码画到背景上

        var imageBox = document.getElementById("newimage")
        var canvas = document.getElementById("canvas")
         canvas.width = 265 * rate
         canvas.height = 380 * rate
         var cxt = canvas.getContext("2d")
         var img = new Image()
         img.setAttribute('crossOrigin', 'anonymous');// 如果是网路图片需设置这句,且服务器设置允许跨域
         img.src = 'https://wodan-idc.oss-cn-hangzhou.aliyuncs.com/shijianke-wap/h5/test/partner/img/new_bg.png'
         //  图片加载完成，才可处理
         img.onload = () => {
             // 画图(这里画布与图片等宽高)
             cxt.drawImage(img, 0, 0, img.width, img.height, 0, 0, 265 * rate, 380 * rate)
             // 画第二张图
             let img2 = document.getElementById("qrcode").children[0]; // 我这里直接拿的第一个canvas元素画,如果拿的是img元素,在手机上画不出来.
             cxt.drawImage(img2, 0, 0, img2.width, img2.height, 192 * rate, 284 * rate, 60 * rate, 60 * rate)
             imageBox.src = canvas.toDataURL('image/png') // 将canvas 转换成图片可以长按保存
      
         }