构建自己的二维码生成工具

原文链接

欢迎大家对于本站的访问 - AsterCasc

前言

最近开发的嵌入式人脸核验机器上有二维码识别解析的需求，所以经常需要使用不同样式的二维码进行测试，进行识别度判断和效率调整。但是很多生成二维码的网址不是广告太多，就是功能不全，所以这里咱们简单写一个放在自己的网站中，方便使用，仅供大家参考

开发

和以前一样，不重复造轮子，咱们还是找别人包实现。这里咱们提供两种选择，一个是qrcode-vue3这种高度集成的包，或者是QR Code Generator或是qrcode这种未完全包装，自由度比较高的包。咱们这里选择qrcode-vue3，一方面刚好我们构建的是vue3，另一方面这个包在功能自由性上非常完善，在样式自由性上也可以说差强人意。小伙伴可以浏览我的构建仅供参考，并没有集成他的全部功能

首先package.json引入包

{
    //...
    "qrcode-vue3": "^1.6.8",
    //...
}

然后我们只需要引入他的vue组件，再配置传入参数即可在页面上自动生成二维码，

<template>
   <QRCodeVue3 value="Simple QR code"/>
</template>
<script setup>
import QRCodeVue3 from "qrcode-vue3";
//...
</script>

我们一般情况下定义的有，点阵样式options.dotsOptions.type，options.cornersSquareOptions.type，options.cornersDotOptions.type在我们的样例中，将三合一，但是他本身是可以支持不同样式在点阵中的。还比如点阵颜色和背景颜色options.dotsOptions.color，options.backgroundOptions.color，options.cornersSquareOptions.color，options.cornersDotOptions.color同样，在我们的代码中进行了合并，包括下载、样式相关内容都可以进行自定义。更多自定义选项参考文档源码

这里我们给出代码参考，

<template>

  <div style="padding: 1.5%">

    <div class="code-generator-tag-title">
      <div>
        <q-icon class="q-mx-sm" name="fa-solid fa-qrcode" size="1em"/>
        QRCode Generator
      </div>
    </div>

    <div class="row justify-center" style="margin: 2% 2% 1% 2%; min-height: 30rem">
      <div class="row col-11 col-lg-8">
          
          <!-- something else -->
          
        <div class="col-4">
          <QRCodeVue3
              :width="280"
              :height="280"
              :value="qrValue"
              :key="qrValue + qrType + qrColor + qrBgColor"
              :dotsOptions="{
                type: qrType,
                color: qrColor,
              }"
              :backgroundOptions="{
                color: qrBgColor
              }"
              :cornersSquareOptions="{
                color: qrColor,
                type: qrType,
              }"
              :cornersDotOptions="{
                color: qrColor,
              }"
              myclass="qrcode-generator-download-div"
              download
              downloadButton="qrcode-generator-download-btn"
              :downloadOptions="{
                name: qrValue + '.astercasc.qrcode',
              }"
          />
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import QRCodeVue3 from "qrcode-vue3";
import {ref} from "vue";

//qrcode config
let qrType = ref("square")
let qrValue = ref("https://astercasc.com")
let qrColor = ref("#004400")
let qrBgColor = ref("#FFFFFF")

</script>

<style lang="sass" scoped>
@import "@/styles/cask.sass"
@import "@/styles/cask-little-mini-style.scss"

.code-generator-tag-title
  font-family: Roboto Slab, sans-serif
  letter-spacing: -.05rem
  font-size: 2.5rem
  color: $cask_dark_jungle_green
  margin-bottom: 1rem
  opacity: 0.8
  font-weight: 400

</style>

<style lang="sass">

.qrcode-generator-download-div
  margin: 5rem 0 2rem 0

.qrcode-generator-download-btn
  position: absolute
  left: 50%
  margin: .5rem 0 0 -5rem
  border-color: transparent
  cursor: pointer
  font-family: Roboto Slab, sans-serif
  text-align: center
  color: white
  min-height: 2.5rem
  width: 10rem
  background-image: linear-gradient(195deg, #447550, #2B5853)
  border-radius: 0.8rem
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12)

</style>

全部示例参考网站源码

注意

• 传入属性key如果改变，组件会接收到事件，重刷二维码。这里选择将所有参数相加来的方式，完成任意参数改变则更新二维码的需求，如果小伙伴有别的需求可以自行修改触发二维码重刷方式
• 该项目使用了vue的实验特性Suspense，在非生产环境下会产生日志<Suspense> is an experimental feature and its API will likely change.，介意的小伙伴可以通过patch-package修改源码，注释掉这个提示。如果不希望使用这个实验特性可以直接修改源码或者更换使用包

原文链接

欢迎大家对于本站的访问 - AsterCasc