H5 動態加載二維碼並實現保存相冊功能

由於項目需求，第一次寫這種功能，在網上查了好久，最后終於找到個類似的

參考：https://juejin.im/post/6844903869542055950

 

思路：鏈接轉化為二維碼，然后利用qrcode轉化為的base64圖片用img加載出來，再利用瀏覽器的長按圖片可以保存到相冊功能保存圖片

 

下面是我自己寫的內容：

1、安裝  qrcodejs2 （我這里安裝默認版本不行，所以指定了一下），然后你只是需要鏈接轉二維碼的功能，可以安裝@xkeshi/vue-qrcode.js包

npm install qrcodejs2 --save-dev

npm install --save @xkeshi/vue-qrcode //安裝到生產環境

2、使用 

import QRCode from 'qrcode'

<div id="code"><canvas id="canvas" ></canvas></div>

import QRCode from 'qrcode'

getUrlCode() {
  var canvas=document.getElementById("canvas"); //獲取到canvas
  var code=document.getElementById("code");   //獲取到code容器
  QRCode.toCanvas(canvas,this.qrcodeUrl, error=> {
    if (error) {
      
    } else {
      
    }
  })
  var image = new Image();     //實例一個img
  image.src = canvas.toDataURL("image/png");  //轉換成base64格式路徑的png圖片
  image.style.width = "40%";    //設置樣式
  code.appendChild(image);     //添加到code 容器中
  canvas.style.display = "none";   //隱藏掉canvas
},