您现在的位置是:首页 > Javascript
当前栏目
ZXing Blazor 扫码组件 , ssr/wasm通用
2023-04-18 15:03:41 时间
项目介绍
本项目是利用 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
相关文章
- 前端面试 【JavaScript】— typeof 是否能正确判断类型?
- 前端面试 【JavaScript】— instanceof 能否判断基本数据类型?
- 前端面试 【JavaScript】— 能不能手动实现一下 instanceof 的功能?
- 前端面试 【JavaScript】— Object.is和=== 有什么区别?
- 前端面试 【JavaScript】— JS中类型转换有哪几种?
- 前端面试 【JavaScript】— == 和 ===有什么区别?
- 前端面试 【JavaScript】— 对象转原始类型是根据什么流程运行的?
- JavaScript 的 parseInt() 函数
- javascript实现两个数字进行组合
- JS监听键盘按键
- 大前端开发中的路由管理之五:Flutter篇
- Javascript的DOM操作
- 在Vue项目中使用WebSocket技术
- 新手向:前端程序员必学基本技能——调试JS代码
- React 毁了 Web 开发!
- 「JS 逆向百例」cnki 学术翻译 AES 加密分析
- 商标注册域名后缀用什么?商标和域名有哪些区别?
- 网站建设流程是怎样的?需要看重哪些细节?
- 网站域名商标注册流程是什么?网站域名商标有什么用?
- 如何建设一个实用性强的网站 网站上线后如何运营