适用于SSR/WASM的ZXingBlazor扫码组件，高效集成与优化

项目介绍

本项目是利用 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

<h3>条码扫描 BarcodeReaderh3>
<h4>扫描条码/QR码。h4>
<button class="btn btn-sm btn-light"
type="button"
@onclick="(() => ShowScanBarcode = !ShowScanBarcode)">
[扫码]
button>
<input type="text" class="form-control" style="min-width: 100px;"
@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

使用注意事项

• 站点要启用 https，这是浏览器厂商要求的


• 移动端 iOS 系统必须使用 Safari 浏览器，切换前/后摄像头要点一下关闭功能按钮


• 安卓手机大概率需要原生系统浏览器，Chrome 是必定可以的，某些浏览器可能不兼容摄像头


• 条码识别率与手机像素，条码大小，手机执行效率有关

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

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