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

合集 - Blazor hybird / MAUIBlazor (37)

1.bh002- Blazor hybrid / Maui 保存设置快速教程2023-08-212.bh002- Blazor hybrid / Maui 使用ORM和数据库快速教程2023-08-223.bh001- Blazor hybrid / Maui 使用摄像头和扫码快速教程2023-08-174.bh003- Blazor hybrid / Maui 使用蓝牙BLE快速教程2023-08-235.bh004- Blazor hybrid / Maui 使用 BootstrapBlazor UI 库快速教程2023-08-246.bh006- Blazor hybrid / Maui 使用NFC快速教程2023-08-257.如何在 Maui Blazor 使用 BlazorWebView 像本机浏览器一样下载文件？2023-03-108.【多图】发布用于App Store分发的 iOS 应用2023-07-189..NET Core 跨平台 GUI 开发 与 Blazor / MAUI 2023-08-2810.如何为面向 Windows 的 MAUI Blazor 应用程序设置窗口标题？2022-12-0311.如何在 .NET MAUI 中加载 json 文件？2022-11-1412.发布 .NET 7 MAUI / MAUI Blazor 应用到 Windows 应用商店2022-11-1313.谷歌地图之类的api要在 maui 里面使用, 需要授权0.0.0.0的IP2022-10-1314.发布 .NET MAUI / MAUI Blazor 应用 (1) - Windows2022-08-0915.MAUI Blazor 权限经验分享 (定位,使用相机)2022-08-0416.Blazor Hybrid / MAUI 简介和实战2022-05-0717.在 Mac 上开发 .NET MAUI2022-03-2618.在 M1 Mac 上开发 .NET MAUI (iOS)2022-03-2619.树莓派4b装系统到运行 Blazor Linux 本地程序全记录2023-09-1620.在 Blazor WASM 中手撸一个.NET MD5类2023-11-2521.Maui blazor ios 按设备类型设置是否启用safeArea2024-01-0422.BootstrapBlazor 模板适配移动设备使用笔记2024-02-08

23.ZXing Blazor 扫码组件 , ssr/wasm通用2020-10-01

24.mac arm 调试 maui 提示 iOS 构建没有“net8.0-ios/iossimulator-x64”的目标2024-02-1525.Blazor OIDC 单点登录授权实例7 - Blazor hybird app 端授权2024-04-1026.Blazor/Hybird 触屏下单程序调优笔记2024-05-0627..Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 发布到 Win7+2024-05-1328.BlazorHybrid 通过Blazor简单调用本机功能2024-06-0929.让maui的mac app里的webview组件支持调试2024-07-2830.转发wsa和安卓模拟器网络2024-08-0731.解决某些安卓系统webview版本低于92无crypto .randomUUID方法2024-08-2032.Blazor 渲染当前语言区小数点格式对应编辑组件2024-12-2933.另辟新径实现 Blazor/MAUI 本机交互(一)02-1134.另辟新径实现 Blazor/MAUI 本机交互(二)02-1135.Maui 基础 - Preferences 存储和检索应用程序的首选项02-1136.另辟新径实现 Blazor/MAUI 本机交互(三)02-1137.另辟新径实现 Blazor/MAUI 本机交互(四)02-11

收起

项目介绍

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