Vue automatically generates QR codes and can download QR codes

        When encountering a requirement, the front-end needs to generate the user's personal business card sharing QR code by itself, and provide a QR code download function. I found many solutions on the Internet, and finally finished it. I organized and recorded it to facilitate subsequent learning and use! Hey hey O(∩_∩)O~

This little thing has the following features:

1. Can generate QR codes with varying degrees of density.

2.Can generate QR codes of different colors

3. QR code supports downloading

4. The code is concise and easy to understand (this is the only way for beginners!)

        First of all, let me record my experimental version. Because I was afraid of messing up the project, I created a separate small demo myself for experimentation, and then moved it to use after the function was realized. It’s very clever whether it’s a tie or not! ! !

1. Experimental small demo

1. Click to get the QR code

<template>
 <div class="click-code">
 <div class="click-code-pic">
   <img class="logo" :src="src">
  </div>
 <div class="click-code-info">
     <h6>{
   
   {title}}</h6>
     <p>{
   
   {text}}</p>
     <button @click="getCode(1)">点击获取二维码</button>
     <div class="isShow" v-if="isClick==1">
      <div class="img-box">
          <!-- 这里一定要记得写绑定，一开始一直弹不出来，最后才发现是没绑定！！！ -->
          <JkQrcode :url="url" :color="color" :margin="margin" class="cover-img"/>
          <span class="image-remove" @click="getCode(0)">+</span>               
      </div>
     </div>
     </div>
 </div>
</template>

<script>
import JkQrcode from'./JkQrcode'

export default {
  name: 'ClickCode',
   components: {
     JkQrcode,
  },
  data() {
     return {
      isClick: 0,
      title:'你好呀！',
      text:'点击下方按钮获取二维码',
      width: 500,
      margin: 1,
      src:require('../assets/logo.png') ,
      url:'',
      color:'#'
     };
 },
 methods:{
     getCode(a){
      if(a==1){
        this.isClick=1;
        // 生成不同的二维码（在实际项目中，这些信息是通过后端返回的信息来绑定的，而不是这样随机生成啥就是啥） 
        let arr = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z",
        "A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z",
        "0","1","2","3","4","5","6","7","8","9"];
        // //生成不同的颜色  
        let lit=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
        // 为了降低重复率，多几个拼接，发现循环次数越多，二维码越密密麻麻
        for(let i=0;i<16;i++){
            this.url+=arr[Math.floor(Math.random()*36)];
        }
        // this.url="http://"+this.url+".png";
        for(var j=0;j<3;j++){
            this.color+=lit[Math.floor(Math.random()*16)];
        }
        var HisUrl=this.url;
        var HisCol=this.color;
      }
      if(a==0){
        if(!confirm("关闭后二维码将刷新，是否确定关闭？"))
        {
          this.url=HisUrl;
          this.color=HisCol;
        }
        else{
          this.isClick=0;
          // 这里一定要初始化，不然它会一只连接下去，越来越长越来越长
          this.url="";
          this.color="#";
        }
      }
  }
 }
}
</script>

<style>
button{
  width:150px;
  height:50px;
  position: absolute; 
}
.img-box{
  display: inline-block;  
  border: 1px solid #ececec;
  position: relative;
}
.cover-img{
  max-width: 800px;
  min-width: 200px;
}
.image-remove{
  background-color: white;
  font-color: #ececec;
  font-size: 30px;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 100%;
  transform: rotate(45deg); 
  cursor:pointer;
  opacity: 0.5;
  top:2px;
  right:2px;   
  display: block; 
  position: absolute; 
}
.isShow{
  display: true;
  position: absolute; 
  top: 10%; 
  left: 15%; 
  /* opacity属性指定了一个元素后面的背景的被覆盖程度。【设置透明度：越低越透明】*/
  opacity: .90; 
}
.logo{
  width: 200px;
  height: 200px;
  border-radius: 15px;
}
.click-code {
 display: flex;
 height: 200px;
 border: 3px solid #999;
 padding: 20px;
 border-radius: 21px;
  &-pic {
    display: flex;
    flex-direction: column;
    justify-content: center;
     img {
     height: 100%;
     }
 }
 &-info {
 display: flex;
 flex-direction: column;
 justify-content: center;
 h6 {
 font-size: 46px;
 }
 p {
 font-size: 36px;
 margin-top: 20px;
 }
 }
}
</style>

2. Click to download the QR code

<template>
  <div class="qrcode-box">
    <img :src="imgUrl" alt="二维码图片"/><br/>
    <!-- 一开始写在ClickCode，一直获取不到图片，写在这里面就可以顺利找到图片地址了 -->
    <button @click="downloadCodeImg" >点击下载二维码</button> 
  </div>
</template>

<script>
import QRCode from 'qrcode'

export default {
  name: 'JkQrcode',
  props: {
    url: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: '#000'
    },
    width: {
      type: Number,
      default: 200
    },
    margin: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      imgUrl: ''
    }
  },
  watch: {
    url() {
      this.createQRCode()
    }
  },
  mounted() {
    this.createQRCode()
  },
  methods: {
    createQRCode() {
      if (!this.url) return
      QRCode.toDataURL(this.url, {
        errorCorrectionLevel: 'H',
        color: { dark: this.color, light: '#fff' },
        width: this.width,
        margin: this.margin
      })
        .then(url => {
          this.imgUrl = url
        })
        .catch(err => {
          console.error(err)
        })
    },
    //https://blog.csdn.net/sumimg/article/details/102969740 //下载二维码
     downloadCodeImg(){
     let link = document.createElement('a')
     let url =  this.imgUrl//要下载的路径
     // 这里是将url转成blob地址，
     fetch(url).then(res => res.blob()).then(blob => { //将链接地址字符内容转变成blob地址
         link.href = URL.createObjectURL(blob)
         console.log(link.href)
         link.download ='QrCode'
         document.body.appendChild(link)
         link.click()
     })
  }
  }
}
</script>
<style>
button{
  width:150px;
  height:50px;
  position: absolute; 
}
.qrcode-box {

}
</style>

3. Use components

<template>
  <clickCode/>
</template>

<script>
import ClickCode from './components/ClickCode'

export default {
  name:'App',
  components: {
    ClickCode
  }
}
</script>

4. Effect

 

2. Use in mini program projects (using Canvas)

Here, the size of the QR code is adaptive

qrwidth: 200 / 750 * wx.getSystemInfoSync().windowWidth,

1. Use the entrance

<view><button class="edit-btn" @tap="handleShareCard">分享名片</button></view>

<canvas v-show="showQrcode" class="canvas-qcode" canvas-id="qrcanvas" :style="'width:' + qrwidth + 'px;height:' + qrwidth + 'px;'"></canvas>

<canvas class="temp-canvas" canvas-id="tempCanvas" style="position: absolute; left: -10000px; top: 10000px;" :style="'width:' + qrwidth + 'px;height:' + qrwidth + 'px'"></canvas>

 2. Generate a unique QR code

      const text = getApp().globalData.QCODE_URL + (_self.company.tyshxydm || "") + "&companyName=" + _self.company.jgmc
      drawQrcode({
        width: _self.qrwidth,
        height: _self.qrwidth,
        foreground: _self.qrColor,
        canvasId: "qrcanvas",
        text,
        image: {},
        callback: res => {}
      });

      // 在名片中这么处理，在详情页不需要处理中间图片
      drawQrcode({
        width: _self.qrwidth,
        height: _self.qrwidth,
        foreground: '#000',
        canvasId: "tempCanvas",
        text: text + "&companyMobile=" + _self.userInfo.mobile,
        callback: res => {
          // 读取二维码，并绘制二维码
          _self.canvasToImg({
            canvasId: "tempCanvas",
            width: _self.imageWidth,
            height: _self.imageWidth * 0.6,
            callback(res) {
              console.info("canvasToImg", res.tempFilePath);
              _self.canvasImg = res.tempFilePath;
            }
          });
        }
      });

3, save

    // 保存名片
    onTapSaveCard(e) {
      let _self = this;
      _self.canvasToImg({
        canvasId: "cardCanvas",
        width: _self.imageWidth,
        height: _self.imageWidth * 0.6,
        callback(res) {
          debugger
          _self.saveImg(res.tempFilePath);
        }
      });
    },

 Since some of the company's business cannot be revealed, just put some core code! ~

All in all, the instructor said that drawing with canvas would have better performance.