1.生成二维码

        1)安装qrcode

 npm install qrcode


        2)生成二维码代码

<template>
    <el-input v-model="formData.designation"></el-input>
    <el-input v-model="formData.people"></el-input>
    <el-button type="primary" @click="generateQRCode">生成二维码</el-button>
    <!-- 二维码展示 -->
    <canvas ref="qrcodeCanvas"></canvas>
</template>
<script setup>
    import QRCode from 'qrcode';
    const formData = ref({
      designation:'',
      people:'',
    })
    const QRCodeType = ref(0)
    // 生成二维码
    const generateQRCode = async () => {
      try {
        // 获取 canvas 元素的引用
        const canvas = document.querySelector('canvas');
        // 将输入字段合并成一个字符串
        let data = generateString(formData.value);
        console.log(data)
        // 使用 qrcode 库生成二维码
        await QRCode.toCanvas(canvas, data || '', { errorCorrectionLevel: 'H' });
        QRCodeType.value = 1
      }catch (error) {
        console.error('Error generating QR code:', error);
      }
    // 对象合成字符串的方法
  const generateString = (formData) => {
    let result = ''
    for (const key in formData) {
      if (formData.hasOwnProperty(key)) {
        result += formData[key] + ','
      }
    }// 去掉末尾的逗号
    result = result.slice(0, -1)
    return result
  }
};
</script>

2.解析二维码

        1)安装  jsqr

npm install jsqr

        2)解析二维码代码

                父组件
<template>
    <parseQRCode @get-code-data="getCodeData"></parseQRCode>
</template>
<script setup>
import parseQRCode from './components/parseQRCode.vue'
// 获取得到的二维码数据
const getCodeData = (vm) =>{
  const codeData = vm.split(',');
  console.log(codeData,'获取得到的二维码数据',vm)
  formData.value.designation = codeData[0]
  formData.value.people = codeData[1]
}
</script>
                子组件
<template>
  <div>
    <div @click="openFileInput" style="cursor: pointer;">从图像二维码导入</div>
    <input id="fileInput" type="file" accept="image/*" style="display: none;" @change="handleFileChange">
    <!-- <div v-if="decodedValue">
      解析结果: {{ decodedValue }}
    </div>
    <div v-else>
      未找到二维码
    </div> -->
  </div>
</template>

<script setup>
import { ref } from 'vue';
import jsQR from 'jsqr';

const decodedValue = ref(null);

const emits = defineEmits([
  'get-code-data', 
])
const openFileInput = () => {
  const fileInput = document.getElementById('fileInput');
  if (fileInput) {
    fileInput.click();
  }
};

const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (event) => {
    const image = new Image();
    image.onload = () => {
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      canvas.width = image.width;
      canvas.height = image.height;
      context.drawImage(image, 0, 0);

      const imageData = context.getImageData(0, 0, image.width, image.height);
      const code = jsQR(imageData.data, image.width, image.height);

      if (code) {
        decodedValue.value = code.data;
        emits('get-code-data', code.data);
      } else {
        decodedValue.value = null;
      }
    };
    image.src = event.target.result;
  };
  reader.readAsDataURL(file);
};
</script>

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐