vue 動態生成二維碼

npm install qrcodejs2 --save

這里的效果可以實現在安卓或者蘋果手機支持長按功能掃描。

html　

          <div id="qrcode" class="qrcode_img" style="width: 151px;height:151px;z-index: 4;display: none"></div>
          <img :src="src" class="qrcode_img" style="width: 151px;height:151px;z-index: 4;" alt="">

一開始我沒有用img，在安卓手機不能長按識別出來，就蘋果可以。 然后呢， 按我寫法就可以了。  原理就是用拿到插件生成img 的 src 賦值到img就可以。 

script　　

import QRCode  from "qrcodejs2"

export default {
        data() {
            return {
              code_data: '恭喜您，獲取神獸朝里一枚！哈哈哈哈', // 接二維碼的變量
              src: '',
            }
        },
        methods: {
          // 生成二維碼
          qrcode () {
            let that = this;
            let qrcode = new QRCode('qrcode', {
              width: 151,
              height: 151,        // 高度
              text:  this.code_data,   // 二維碼內容
              // render: 'canvas' ,   // 設置渲染方式（有兩種方式 table和canvas，默認是canvas）
              // background: '#f0f',   // 背景色
              // foreground: '#ff0'    // 前景色
            })
            setTimeout(()=>{
              var mycanvas1=document.getElementsByTagName('canvas')[0];
              //將轉換后的img標簽插入到html中
              var img=this.convertCanvasToImage(mycanvas1);
            },300)
          },
          convertCanvasToImage(canvas) {
            //新Image對象，可以理解為DOM
            var image = new Image();
            // canvas.toDataURL 返回的是一串Base64編碼的URL，當然,瀏覽器自己肯定支持
            // 指定格式 PNG
            image.src = canvas.toDataURL("image/png");
            this.src = canvas.toDataURL("image/png")
            return image;
          },     
        },
        mounted() {
          this.$nextTick (function () {
            this.qrcode();
          })
          this.get_stamps()
          this.wx_share()
        },
        components: {

        },
    }