项目介绍

本项目是利用 ZXing 进行封装的 Blazor 组件库

直接调用手机或者桌面电脑摄像头进行扫码

项目截图

            

项目地址

https://github.com/densen2014/ZXingBlazor

演示地址

ssr https://zxingblazor.app1.es

wasm https://densen2014.github.io/

Nuget 包安装

https://www.nuget.org/packages/ZXingBlazor/

使用

在文件 Pages/_Host.cshtml 添加引用,  wasm项目对应文件是 wwwroot/index.html

在Blazor页面中添加, 例如  Pages/Index.razor

条码扫描 BarcodeReader

扫描条码/QR码。

@onclick="(() => ShowScanBarcode = !ShowScanBarcode)"> [扫码]
@bind-value="BarCode" placeholder="条码" />
@if (ShowScanBarcode)
{

<BarcodeReader ScanResult="((e) => { BarCode=e; ShowScanBarcode = !ShowScanBarcode; })"  
               ShowScanBarcode="ShowScanBarcode"  
               Close="(()=>ShowScanBarcode=!ShowScanBarcode)" />

}

@code{

/// <summary>  
/// 显示扫码界面  
/// </summary>  
bool ShowScanBarcode { get; set; } = false;

/// <summary>  
/// 条码  
/// </summary>  
public string? BarCode { get; set; }

}

事件 Events

参数

说明

类型

ScanResult

扫码结果回调方法

EventCallback

Close

关闭扫码框回调方法

EventCallback

使用注意事项

• 站点要启用 https，这是浏览器厂商要求的
• 移动端 iOS 系统必须使用 Safari 浏览器，切换前/后摄像头要点一下关闭功能按钮
• 安卓手机大概率需要原生系统浏览器，Chrome 是必定可以的，某些浏览器可能不兼容摄像头
• 条码识别率与手机像素，条码大小，手机执行效率有关

这是本人第一个上传的Nuget包，但愿能帮到有需要的人。各位看官都来赞一下或者喷一下吧！

本项目也合并在Argo Zhang老板的 BootstrapBlazor Component 项目, 国内朋友可移步  https://www.blazor.zone/barcodereaders