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
关联项目
FreeSql QQ群:4336577
BA & Blazor QQ群:795206915
Maui Blazor 中文社区 QQ群:645660665
知识共享许可协议
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名AlexChow(包含链接: https://github.com/densen2014 ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系 。
转载声明
本文来自博客园,作者:周创琳 AlexChow,转载请注明原文链接:https://www.cnblogs.com/densen2014/p/ZXingBlazorComponent.html
AlexChow
今日头条 | 博客园 | 知乎 | Gitee | GitHub
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· 本地部署 DeepSeek:小白也能轻松搞定!
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 如何基于DeepSeek开展AI项目