Blazor组件自做三 : 使用JS隔离封装ZXing扫码

最新推荐文章于 2025-11-16 07:06:44 发布

原创

最新推荐文章于 2025-11-16 07:06:44 发布 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#.net

本文介绍了如何在Blazor应用中使用JS隔离技术，自定义封装ZXing库，并创建手写签名和条码扫描组件，涉及组件生命周期、Blazor与JS交互、组件调用与布局调整。

本文基础步骤参考前两篇文章

Blazor组件自做一 : 使用JS隔离封装viewerjs库

Blazor组件自做二 : 使用JS隔离制作手写签名组件

1. 在文件夹wwwroot/lib,添加zxing子文件夹,里面下载库文件(文件文末源码里可复制) qrcode.min.js和zxing.min.js复制到此文件夹. 最终版本参考如下

+zxing
  |-qrcode.min.js
  |-zxing.min.js

zxing

2. 添加zxingjs.js文件

+zxing
  |-zxingjs.js

zxingjs.js代码

import '/lib/zxing/zxing.min.js';
var codeReader = null;
export function init(autostop, wrapper, options) {
    console.log('autostop' + autostop);

    let selectedDeviceId;
    //const codeReader = new ZXing.BrowserBarcodeReader()
    codeReader = new ZXing.BrowserMultiFormatReader()
    console.log('ZXing code reader initialized')
    codeReader.getVideoInputDevices()
        .then((videoInputDevices) => {
            const sourceSelect = document.getElementById('sourceSelect')
            selectedDeviceId = videoInputDevices[0].deviceId
            console.log('videoInputDevices:' + videoInputDevices.length);
            if (videoInputDevices.length > 1) {
                videoInputDevices.forEach((element) => {
                    const sourceOption = document.createElement('option')
                    sourceOption.text = element.label
                    sourceOption.value = element.deviceId
                    sourceSelect.appendChild(sourceOption)
                    selectedDeviceId = element.deviceId;
                })

                sourceSelect.onchange = () => {
                    selectedDeviceId = sourceSelect.value;
                    codeReader.reset();
                    StartScan();
                }

                const sourceSelectPanel = document.getElementById('sourceSelectPanel')
                sourceSelectPanel.style.display = 'block'
            }

            StartScan(autostop);

            document.getElementById('startButton').addEventListener('click', () => {
                StartScan();
            })

            function StartScan(autostop) {
                codeReader.decodeOnceFromVideoDevice(selectedDeviceId, 'video').then((result) => {
                    console.log(result)
                    document.getElementById('result').textContent = result.text

                    var supportsVibrate = "vibrate" in navigator;
                    if (supportsVibrate) navigator.vibrate(1000);

                    if (autostop) {
                        console.log('autostop');
                        codeReader.reset();
                        return wrapper.invokeMethodAsync("invokeFromJS", result.text);
                    } else {
                        console.log('None-stop');
                        codeReader.reset();
                        wrapper.invokeMethodAsync("invokeFromJS", result.text);
                    }

                }).catch((err) => {