vue3里前端生成二维码和解析二维码（不需要后端参与）

1.生成二维码

        1）安装qrcode

 npm install qrcode

        2）生成二维码代码

    
    
    生成二维码
    
    


    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
  }
};

2.解析二维码

        1）安装  jsqr

npm install jsqr

        2）解析二维码代码

                父组件

    


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]
}

                子组件

  
    从图像二维码导入
    
    { decodedValue }}
    
    
      未找到二维码
     -->
  


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);
};