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

<script src="_content/ZXingBlazor/lib/barcodereader/zxing.js"></script>

<script src="_content/ZXingBlazor/lib/barcodereader/barcode.js"></script>

 

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

 

<h3>条码扫描 BarcodeReader</h3>

<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

参数	说明	类型
ScanResult	扫码结果回调方法	EventCallback<string>
Close	关闭扫码框回调方法	EventCallback

 

使用注意事项

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

 

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

 

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