ZXing Blazor 扫码组件 , ssr/wasm通用

项目介绍

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