前端 vue 二维码解析工具

因为项目需要获取美团的团购券码核销功能 所以需要解析二维码图片

下面需要用到这个工具“qrcode-decoder”

先安装这个工具依赖

npm i qrcode-decoder

然后引入

import QrCode from 'qrcode-decoder'

在需要解析的函数内，使用工具

decodeQrCode(file) {
      var that = this;
      var url = null;
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      }
      // console.log(url)
      const qr = new QrCode()
      qr.decodeFromImage(url).then(res=>{
        // console.log(res.data)
        Notify({ type: "danger", message: "券码识别成功" });
        that.couponCode = res.data;
      }).catch(err=>{
        setTimeout(() => {
          that.$toast({
            overlay: true,
            message: "券码识别失败，请重新上传",
            duration: 2000,
          });
          that.couponCode = "";
        }, 2000);
      })
    },

file是二维码图片文件 我这里是用vant的Uploader上传组件获取到的 用别的ui组件也是一样的逻辑

qr.decodeFromImage返回的res.data就是解析结果