Vue中兩種生成二維碼(帶logo)并下載方式總結

更新時間：2024年03月15日 08:26:27 作者：元素蘇_

與后端生成二維碼相比,前端生成二維碼更具有靈活性,下面這篇文章主要給大家介紹了關于Vue中兩種生成二維碼(帶logo)并下載的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1.現(xiàn)在需要在頁面中生成一個二維碼，并附帶上公司的logo

生成的二維碼需要顯示logo，并且點擊可以二維碼可以下載保存，有兩種方案供選擇（vue-qr、qrcode）

2.vue-qr庫使用（方案一）

npm i vue-qr@4.0.9

我的nodejs版本12.13.0，大家可以使用cnpm下載更好。

html代碼：

<template>
  <div class="main">
    <div>
      <vue-qr 
        :text="codeText"    
        :size="150"
        :margin="20"
        colorDark="#333"
        backgroundColor="#eee"
        :logoSrc="lgoImg"
        logoScale="0.21"
        logoMargin="25px"
        :callback="getCode"
      ></vue-qr>
    </div>
  </div>
</template>

JS代碼：

<script>
import VueQr from 'vue-qr'
export default {
  name:'QR',
  components:{VueQr},
  data() {
    return {
      codeText: 'https://blog.csdn.net/yuansusu_?spm=1000.2115.3001.53',
      lgoImg: require('../assets/111.png'),
    };
  },
  methods: {
    getCode(codeImg) {
      console.log('二維碼圖片', codeImg);
    },
  }
}
</script>

text是要生成的內(nèi)容
size表示二維碼的寬高，寬高一致
margin二維碼圖像的外邊距, 默認 20px
colorDark實點的顏色
backgroundColor背景顏色(背景圖片使用bgSrc或gifBgSrc)
logoSrc嵌入中間的logo地址
logoScale用于計算 LOGO 大小的值, 過大將導致解碼失敗, LOGO 尺寸計算公式 logoScale*(size-2*margin), 默認 0.2
logoMargin設置LOGO 標識周圍的空白邊框, 默認為0
callback生成的二維碼 Data URI 可以在回調(diào)中取得,第一個參數(shù)為二維碼 data URL, 第二個參數(shù)為 props 傳過來的 qid(因為二維碼生成是異步的,所以加個 id 用于排序)

官網(wǎng)文檔：vue-qr - npm（文檔是中文，可以放心食用）

3.qrcode庫使用并帶下載方式（方案二）(推薦)

npm i qrcode@1.5.1

使用qecode配置的logo更為靈活，并且在不是vue項目中也能同樣使用

html（部分）和css代碼：

<div class="qr-code">
    <canvas 
      id="QRCode_header"
      ref="canvas"
      title="掃描二維碼"
    ></canvas>
    <div class="mask-code" @click="saveCode">
      <i></i><span>保存二維碼</span>
    </div>
</div>

<style scoped>
  .qr-code{
    display: flex;
    width:fit-content;
    width:-webkit-fit-content;
    width:-moz-fit-content;
    position: relative;
  }
  .qr-code:hover>div{
    z-index: 0;
  }
  .mask-code{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: -1;
  }
  .mask-code i{
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(../assets/save_img.png);
    background-size: cover;
  }
  .mask-code span{
    color: white;
  }
</style>

可以將上面的內(nèi)容封裝到組件中，通過props來傳遞想要生成的內(nèi)容

JS代碼：

<script>
import QRCode from "qrcode"; //引入生成二維碼插件
export default {
  name:'CodeS',
  props:{
    canvasWidth:{
      default:200,
      type:Number
    },
    canvasHeight:{
      default:200,
      type:Number
    },
    url:{
      default:'',
      type:String,
      required:true
    },
    logoUrl:{
      default:'',
      type:String,
      // required:true
    }
  },
  methods:{
    getQRCode() {
      let opts = {
          errorCorrectionLevel: "H",//容錯級別,指二維碼被遮擋可以掃出結果的區(qū)域比例
          type: "image/png",//生成的二維碼類型
          quality: 0.3,//二維碼質量
          margin: 5,//二維碼留白邊距
          width: this.canvasWidth,//寬
          height: this.canvasHeight,//高
          text: "1111",//二維碼內(nèi)容
          color: {
              light: "#eaeaea"http://背景色
          }
      };
      // 將獲取到的數(shù)據(jù)（val）畫到msg（canvas）上,加上時間戳動態(tài)生成二維碼
      QRCode.toCanvas(this.$refs.canvas, this.url, opts, function (error) {
        if(error){
          console.log('加載失??！');
        }
      });
    },
    saveCode(){
      //下載二維碼
      let base64Img =  this.$refs.canvas.toDataURL('image/jpg');
      //創(chuàng)建下載標簽，然后設置鏈接和圖片名稱
      let a = document.createElement('a')
      a.href = base64Img
      a.download = '二維碼'+Date.now()
      a.click()
      //銷毀元素
      a.remove()
    }
  },
  mounted() {
    this.getQRCode()

    //設置logo圖標
    if(this.logoUrl!= ''){
      let myCanvas = this.$refs.canvas
      let ctx = myCanvas.getContext('2d')
      // 在Canvas畫布 添加圖片
      let img = new Image()
      img.crossOrigin = 'Anonymous';//解決Canvas.toDataURL 圖片跨域問題
      img.src = this.logoUrl;
      img.onload = ()=>{
        //第一個設置的元素，第二三是位置，后面兩個是寬和高
        //居中的位置計算為 （二維碼寬度-img寬度）/2
        let codeWidth = (this.canvasWidth *0.75)/2
        let codeHeight = (this.canvasHeight * 0.75)/2
        ctx.drawImage(img, codeWidth, codeHeight,this.canvasWidth*0.25,this.canvasHeight*0.25)
      }
    }
  },
}
</script>

errorCorrectionLevel糾錯級別有四個：