Vue + Qrcode 實現動態生成二維碼圖片,長按能保存

h5前台經常會有掃碼邀請他人的活動,掌握 動態生成二維碼圖片 就很重要了

將動態鏈接生成二維碼,最開始使用的是: @xkeshi/vue-qrcode 這個插件,很方便使用:

使用方式:

1.下載包

npm install @xkeshi/vue-qrcode --save

 

2.在需要的頁面中使用

<template id="demo">

　　<div class="mask" v-show="ecodePop">

      <div class="ecodePop">

        <div class="main" >         

　　　　　　 <VueQrcode :value="qrcodeUrl" :options="{ size: 113 }"></VueQrcode>

          <p class="ecode_tips">出示二維碼讓用戶掃碼</p>

          <p>長按保存二維碼</p>

        </div>

        <img

          src="./close.png"

          alt

          class="close"

          @click.self.prevent="ecodePopCloce"

        />

      </div>

    </div>

</template>
<script>
import VueQrcode from '@xkeshi/vue-qrcode'
export default {
  data () {
    return {
      qrcodeUrl: 'www.baidu.com'
    }
  },
  components: { qrcode: VueQrcode },
}
</script>

 

3.效果如下圖:

 

 　　會發現,二維碼是用 canvas 畫出來的,非 img 標簽,不能使用長按保存圖片

　　 故舍棄該方法,尋找其他解決方式

 

　　尋尋覓覓,方得一寶物: qrcode

　　沒錯就是用 qrcode + canvas 結合使用即可達到 王炸效果,如下圖:

 

 

怎么搞得嘞,且聽我娓娓道來:

1.先下載包撒

npm install qrcode --save

 

2.頁面中使用嘍

<template id="demo">
　<div class="mask" v-show="ecodePop">
      <div class="ecodePop">
          <div class="main" >         
             <div id="code"></div>
              <p class="ecode_tips">出示二維碼讓用戶掃碼</p>
              <p>長按保存二維碼</p>
          </div>
          <img
            src="./close.png"
            alt
            class="close"
            @click.self.prevent="ecodePopCloce"
          />
      </div>
     <canvas id="canvas" ref ="canva"></canvas>
    </div>
</template>
<script>
import QRCode from 'qrcode'
export default {
  components: {
23     QRCode 
24   },
  methods:{
   // 獲取分享鏈接
  getShareUrl(){
    let canvas: any  = this.$refs.canva;
    var code : any = document.getElementById("code");   //獲取到code容器
    if(code.childNodes.length){ // 判斷元素是否有子元素
      console.log(code.childNodes);
      this.ecodePop = true
      return false
    }else{
      this.ecodePop = false
      const ShareData = {
        otherShareType: 3
      }
      this.$Http.api("Share/GainShareInfo",ShareData,"post").then((data:any)=>{
        if( data.result ){
          QRCode.toCanvas(canvas, data.result.link, function (error:any) {
42             if (error) console.error(error)
43             console.log('success!');
44           })
45           var image = new Image();     //實例一個img
46           image.src = canvas.toDataURL("image/png");  //轉換成base64格式路徑的png圖片 
47           image.style.width = "100%";    //設置樣式
48           code.appendChild(image);     //添加到code 容器中
49           canvas.style.display = "none";   //隱藏掉canvas 
50           this.ecodePop = true
        }
      })
    }
  }

 }  
}
</script>                    

 

我是在點擊彈窗事件中,去調用接口,獲取動態鏈接,存在一個bug: 每點一次就多一個二維碼圖片,因為  使用 appendChild 往盒子里添加img圖片

code.appendChild(image);

 

解決方案就是:

　　在調用接口前,判斷 code 元素是否有子元素,有的話,直接顯示彈窗即可,反之去調用接口

    var code : any = document.getElementById("code");   //獲取到code容器
    if(code.childNodes.length){ // 判斷元素是否有子元素
      console.log(code.childNodes);
      this.ecodePop = true
      return false
    }else{
      調用接口
   }

 

以上就是我實現動態鏈接生成二維碼圖片的詳細過程了

 

分享一刻:

如何在微信建立一個定時提醒機器人