本文主要介紹二維碼實(shí)現(xiàn)的原理

1、使用插件

npm install @zxing/library

2、主要用到 BrowserMultiFormatReader 這個(gè)構(gòu)造函數(shù)，用于打開(kāi)攝像頭

import { BrowserMultiFormatReader } from "@zxing/library";

3. 視圖

<template>
  <div class="pageScan">
    <!-- <van-uploader :after-read="afterRead">
      <div class="item">相冊(cè)</div>
    </van-uploader> -->
    <span class="fileinput-button">
      <span>相冊(cè)</span>
      <input type="file" @change="fileChange" id="avatar" accept="image/*" />
    </span>
    <video ref="video" id="video" class="scanVideo" autoplay></video>
    <div class="scanner">
      <div class="box">
        <div class="line"></div>
        <div class="angle"></div>
      </div>
    </div>
  </div>
</template>

4. 核心代碼（以vue3寫(xiě)法舉例）

<script setup>
import { defineComponent, reactive, onUnmounted, ref } from "vue";
import { useRouter } from "vue-router";
import { BrowserMultiFormatReader } from "@zxing/library";
import QrCode from "qrcode-decoder";
const form = reactive({
  loadingShow: false,
  scanText: "",
  vin: null,
  tipMsg: "嘗試識(shí)別中...",
  tipShow: false,
});
const result = ref("");
const router = useRouter();

const codeReader = new BrowserMultiFormatReader();
const afterRead = (file) => {
  getUrl(file.file);
};
const fileChange = () => {
  // 獲取dom 對(duì)象
  let file = document.getElementById("avatar");
  let resultFile = file?.files[0];
  console.log("resultFile", resultFile);
  getUrl(resultFile);
  // let reader = new FileReader();
  // reader.readAsText(resultFile, "UTF-8");
  // console.log("reader", reader);
};
const getUrl = (file) => {
  let qr = new QrCode();
  let url = getObjectURL(file);
  qr.decodeFromImage(url).then((res) => {
    //打印結(jié)果為 解析出來(lái)的 二維碼地址
    // alert(`res.data ${res.data}`);
    if (res.data) {
      router.push({
        path: "/TransferAccout",
        query: { codeResult: res.data },
      });
    }
    // alert(`res.data====${res.data}`, res.data);
  });
};
const getObjectURL = (file) => {
  let 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);
  }
  return url;
};
const openScan = async () => {
  codeReader
    .getVideoInputDevices()
    .then((videoInputDevices) => {
      form.tipShow = true;
      form.tipMsg = "正在調(diào)用攝像頭...";
      // console.log("videoInputDevices", videoInputDevices);
      // 默認(rèn)獲取第一個(gè)攝像頭設(shè)備id
      let firstDeviceId = videoInputDevices[0].deviceId;
      // 獲取第一個(gè)攝像頭設(shè)備的名稱(chēng)
      const videoInputDeviceslablestr = JSON.stringify(
        videoInputDevices[0].label
      );
      if (videoInputDevices.length > 1) {
        // 判斷是否后置攝像頭
        if (videoInputDeviceslablestr.indexOf("back") > -1) {
          firstDeviceId = videoInputDevices[0].deviceId;
        } else {
          firstDeviceId = videoInputDevices[1].deviceId;
        }
      }
      decodeFromInputVideoFunc(firstDeviceId);
    })
    .catch((err) => {
      form.tipShow = false;
      // console.log(`失敗出錯(cuò)： ${err}`);
    });
};
openScan();

const decodeFromInputVideoFunc = (firstDeviceId) => {
  codeReader.reset(); // 重置
  form.scanText = "";
  codeReader.decodeFromInputVideoDeviceContinuously(
    firstDeviceId,
    "video",
    (result, err) => {
      form.tipMsg = "正在嘗試識(shí)別...";
      form.scanText = "";
      if (result) {
        console.log("掃描結(jié)果", result);
        result.value = result;
        // alert(`掃描結(jié)果${result.value}`);
        router.push({
          path: "/TransferAccout",
          query: { codeResult: result.value },
        });
        // form.scanText = result.text;
        form.scanText = result.getText();
        // alert(`form.scanText===${form.scanText}`);
        if (form.scanText) {
          form.tipShow = false;
        }
      }
      if (err && !err) {
        form.tipMsg = "識(shí)別失敗";
        setTimeout(() => {
          form.tipShow = false;
        }, 2000);
        // console.error(err);
        // alert("err", err);
      }
    }
  );
};

//銷(xiāo)毀組件
onUnmounted(() => {
  codeReader.reset();
  console.log("銷(xiāo)毀組件");
});
</script>

5. 二維碼的樣式

// 掃碼組件
.scan-index-bar {
  background-image: linear-gradient(-45deg, #42a5ff, #59cfff);
}
.van-nav-bar__title {
  color: #fff !important;
}
.scanVideo {
  height: 80vh;
}
.scanTip {
  width: 100vw;
  text-align: center;
  margin-bottom: 10vh;
  color: white;
  font-size: 4vw;
}
.pageScan {
  overflow-y: hidden;
  background-color: #363636;
  width: 100vw;
  height: 100vh;
  position: relative;
  // :deep(.van-uploader) {
  //   z-index: 99;
  // }
  .item {
    display: inline-block;
    position: absolute;
    right: 10px;
    color: white;
    top: 10px;
    font-size: 16px;
    z-index: 99;
  }
}

.scanner {
  background-size: 3rem 3rem;
  background-position: -1rem -1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.scanner .box {
  width: 75vw;
  height: 75vw;
  max-height: 75vh;
  max-width: 75vh;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border: 0.1rem solid rgba(0, 255, 51, 0.2);
}
.scanner .line {
  height: calc(100% - 2px);
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
  border-bottom: 3px solid #00ff33;
  transform: translateY(-100%);
  animation: radar-beam 2s infinite;
  animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
  animation-delay: 1.4s;
}
.scanner .box:after,
.scanner .box:before,
.scanner .angle:after,
.scanner .angle:before {
  content: "";
  display: block;
  position: absolute;
  width: 3vw;
  height: 3vw;
  border: 0.2rem solid transparent;
}
.scanner .box:after,
.scanner .box:before {
  top: 0;
  border-top-color: #00ff33;
}
.scanner .angle:after,
.scanner .angle:before {
  bottom: 0;
  border-bottom-color: #00ff33;
}
.scanner .box:before,
.scanner .angle:before {
  left: 0;
  border-left-color: #00ff33;
}
.scanner .box:after,
.scanner .angle:after {
  right: 0;
  border-right-color: #00ff33;
}
@keyframes radar-beam {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

.result {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.fileinput-button {
  position: absolute;
  display: inline-block;
}

.fileinput-button input {
  position: absolute;
  right: 0px;
  top: 0px;
  opacity: 0;
}
.fileinput-button {
  span {
    font-size: 16px;
  }
  position: absolute;
  display: inline-block;
  overflow: hidden;
  z-index: 99;
  color: white;
  right: 8px;
  top: 8px;
  display: flex;
  align-items: center;
}

``文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-514945.html

到了這里，關(guān)于H5實(shí)現(xiàn)掃碼讀取二維碼條形碼功能（二維碼+條形碼)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！