• qrcodejs2+html2canvas生产二维码海报vue


    安装包

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

      

    HTML

    <div class="scan">
          <div ref="imageDom" class="qrBox" v-if="isQRCode">
            <img class="qrbj" src="../../assets/img/qrbg.png">
            <div class="qrCon">
              <div class="qrTitle">扫码关注</div>
              <div class="qrCanvas">
                <div class="qrBorder"><div id="qrcode" style=" 150px;height:150px"></div></div>
              </div>
            </div>
          </div>
          <img v-else :src="imgUrl" class="qrImg">
        </div>
    

    JS

    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', {
             150,
            height: 150
          })
          qrcode.makeCode(text)
          this.clickGeneratePicture()
        },
        /**
        * 将页面指定节点内容转为图片
        * 1.拿到想要转换为图片的内容节点DOM;
        * 2.转换,拿到转换后的canvas
        * 3.转换为图片
        */
        clickGeneratePicture () { // 生成图片
        // let targetDom = document.getElementById('imageDom')
            // let targetWidth = targetDom.offsetWidth
            // let targetHeight = targetDom.offsetHeight
            // let canvas = document.createElement('canvas')
            // // let scale = window.devicePixelRatio
            // var scale = 1 // 放大倍数
            // canvas.width = targetWidth * scale
            // canvas.height = targetHeight * scale
            // canvas.style.width = targetWidth * scale + 'px'
            // canvas.style.height = targetHeight * scale + 'px'
            // canvas.getContext('2d').scale(scale, scale)
            // html2canvas(targetDom, {
            //   allowTaint: false,
            //   scale,
            //   canvas,
            //   logging: false,
            //   useCORS: true, // 【重要】开启跨域配置
            //    targetWidth,
            //   height: targetHeight,
            //   ignoreElements: (element) => {
            //     if (element.id === 'printHide') {
            //       return true
            //     }
            //   }
            // }).then(canvas => {
            //   this.isQRCode = false
            //   this.imgUrl = canvas.toDataURL('image/png', 1.0)
            // })
          html2canvas(this.$refs.imageDom).then(canvas => {
            // 转成图片,生成图片地址
            this.isQRCode = false
            this.imgUrl = canvas.toDataURL('image/png') // 可将 canvas 转为 base64 格式
          })
        }
      }
    }
    

     效果图

  • 相关阅读:
    基础知识漫谈(5):应用面向对象来分析“语言”
    【线段树】BZOJ2752: [HAOI2012]高速公路(road)
    【树状数组】BZOJ3132 上帝造题的七分钟
    【AC自动机】Lougu P3796
    【Splay】bzoj1500(听说此题多码上几遍就能不惧任何平衡树题)
    【fhq Treap】bzoj1500(听说此题多码上几遍就能不惧任何平衡树题)
    【可持久化线段树】POJ2104 查询区间第k小值
    【RMQ】洛谷P3379 RMQ求LCA
    【倍增】洛谷P3379 倍增求LCA
    【网络流】POJ1273 Drainage Ditches
  • 原文地址:https://www.cnblogs.com/CMing/p/15211633.html
Copyright © 2020-2023  润新知