bacode-scanner

介绍：

扫码插件

• bacode-scanner
  • Reference
    • Method
      • Parameter
    • Usage Plugin

    ---

    • Method
      • Parameter
    • Usage WebComponent

Reference

Method

• createProcesser

  创建控制句柄

import { barcodeScannerPlugin } from "@plaoc/plugins";
const controller = await barcodeScannerPlugin.createProcesser();
// 解析码，需要将图片转化为 blob 数据，再传递给函数进行识别。支持Uint8Array,Blob
controller.process(new Uint8Array());
// 停止解析条码数据的方法
controller.stop();

• process

  解析码，需要将图片转化为 blob 数据，再传递给函数进行识别。

import { barcodeScannerPlugin } from "@plaoc/plugins";

await barcodeScannerPlugin.process(new Uint8Array());

• stop

  停止解析条码数据的方法

import { barcodeScannerPlugin } from "@plaoc/plugins";
await barcodeScannerPlugin.stop();

Parameter

• SupportedFormat

  支持的码类型

import { SupportedFormat } from "@plaoc/plugins";
SupportedFormat.QR_CODE;

Usage Plugin

<script setup lang="ts">
import { onMounted } from "vue";
import { barcodeScannerPlugin, ScannerProcesser } from "@plaoc/plugins";

let controller: ScannerProcesser;
onMounted(async () => {
  // 获取控制器
  controller = await barcodeScannerPlugin.createProcesser();
});
async function onFileChanged($event: Event) {
  const target = $event.target as HTMLInputElement;
  if (target && target.files?.[0]) {
    const img = target.files[0];
    const res = await controller.process(img);
  }
}
</script>
<template>
  <input type="file" @change="onFileChanged($event)" accept="image/*" capture />
</template>

---

Method

• startScanning

开始扫码

Parameter

• ScanOptions?

  扫码传递的选项

import type { ScanOptions } from "@plaoc/plugins";
import { CameraDirection, SupportedFormat } from "@plaoc/plugins";
const options: ScanOptions = {
  rotation: 0,
  direction: CameraDirection.FRONT,
  width: 0,
  height: 0,
  formats: SupportedFormat.QR_CODE,
};

Usage WebComponent

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { HTMLDwebBarcodeScanningElement } from "@plaoc/plugins";

const $barcodeScannerPlugin = ref<HTMLDwebBarcodeScanningElement>();
let barcodeScanner: HTMLDwebBarcodeScanningElement;

onMounted(async () => {
  barcodeScanner = $barcodeScannerPlugin.value!;
});

const startScanning = async () => {
  return await barcodeScanner.startScanning();
};

const stop = async () => {
  return await barcodeScanner.stop();
};
</script>
<template>
  <dweb-barcode-scanning ref="$barcodeScannerPlugin"></dweb-barcode-scanning>
</template>