Vue genera automáticamente códigos QR y puede descargar códigos QR

Language 2023-10-05 13:40:32 views: null

        Cuando se encuentra con un requisito, la interfaz debe generar el código QR compartido de la tarjeta de presentación personal del usuario por sí mismo y proporcionar una función de descarga del código QR. Encontré muchas soluciones en Internet y finalmente la terminé, la organicé y grabé para facilitar su posterior aprendizaje y uso. Oye, oye O(∩_∩)O~

Esta cosita tiene las siguientes características:

1. Puede generar códigos QR con distintos grados de densidad.

2.Puede generar códigos QR de diferentes colores.

3. El código QR admite la descarga

4. El código es conciso y fácil de entender (¡esta es la única forma para principiantes!)

        En primer lugar, permítanme grabar mi versión experimental. Como tenía miedo de estropear el proyecto, creé una pequeña demostración separada para experimentar y luego la moví para usarla una vez que se realizó la función. ¡Es muy inteligente si hay empate o no! ! !

1. Pequeña demostración experimental

1. Haga clic para obtener el código QR

<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. Haga clic para descargar el código QR

<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. Utilice componentes

<template>
  <clickCode/>
</template>

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

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

4. Efecto

 

2. Uso en proyectos de mini programas (usando Canvas)

Aquí, el tamaño del código QR es adaptable.

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

1. Usa la entrada

<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. Genera un código QR único

      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, guardar

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

 Dado que algunos de los negocios de la empresa no se pueden revelar, ¡simplemente ingrese un código central! ~

Con todo, el instructor dijo que dibujar con lienzo tendría un mejor rendimiento.

Supongo que te gusta

Origin blog.csdn.net/Vivien_CC/article/details/132849428
Recomendado
Clasificación
Diario
Más
2024-05-21(34)
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(4)
2024-05-16(22)
2024-05-15(5)
2024-05-14(10)
2024-05-13(7)
2024-05-12(22)

Code World

© 2018 codetd.com