项目介绍

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

ZXing Blazor 扫码组件 , ssr/wasm通用的更多相关文章

  1. Blazor组件自做三 : 使用JS隔离封装ZXing扫码

    Blazor组件自做三 : 使用JS隔离封装ZXing扫码 本文基础步骤参考前两篇文章 Blazor组件自做一 : 使用JS隔离封装viewerjs库 Blazor组件自做二 : 使用JS隔离制作手写 ...

  2. zxing扫码--镭射线

    同步发表于http://avenwu.net/2015/09/15/zxing_view_finder_laser 在很多应用中都有二维码扫描的需求,比如微信,通过扫描电脑二维码,实现用户登录授权: ...

  3. 安卓扫码:简单的ZXing使用记录

    ZXing是Google提供的条形码.二维码等的生成.解析的库.最近工作需求去研究了一下,主要是研究怎么扫描二维码(QRCode).网上教程也不少,但大多看了不明所以,甚至看了半天都不知道解码到底从哪 ...

  4. C#-Xamarin利用ZXing.Net.Mobile进行扫码

    前言 很多人觉得Xamarin的开源少,没法用来开发项目. 但,实际上Xamarin已经有很多开源代码了:只要不是特别特殊的项目,基本上是都可以满足开发. 下面我们来看一下Xamarin中利用开源代码 ...

  5. zxing 扫码第三方SDK版本不兼容问题

    在AndroidStudio环境下,或许会遇到下面的问题: Error:Execution failed for task ':app:preDebugAndroidTestBuild'. > ...

  6. Blazor 模板化组件开发指南

    翻译自 Waqas Anwar 2021年4月15日的文章 <A Developer's Guide To Blazor Templated Components> [1] 在我之前的一篇 ...

  7. Web应用多账号系统设计及微信扫码登录实现

    Web应用多账号系统设计及微信扫码登录实现 1   前言概述 公司对功能测试,性能测试,安全测试等等都做了比较好的自动化后,急需要一个MIS系统来统一管理这些结果及报表. 此MIS系统特点如下: 仅内 ...

  8. C#开发微信门户及应用(41)--基于微信开放平台的扫码登录处理

    在现今很多网站里面,都使用了微信开放平台的扫码登录认证处理,这样做相当于把身份认证交给较为权威的第三方进行认证,在应用网站里面可以不需要存储用户的密码了.本篇介绍如何基于微信开放平台的扫码进行网站的登 ...

  9. Android项目实战(二十八):Zxing二维码实现及优化

    前言: 多年之前接触过zxing实现二维码,没想到今日项目中再此使用竟然使用的还是zxing,百度之,竟是如此牛的玩意. 当然,项目中我们也许只会用到二维码的扫描和生成两个功能,所以不必下载完整的ja ...

随机推荐

  1. iCloud开发: key-value Storage,CloudKit,iCloud Documents

    目录 iCloud开发 iCloud三种类型的存储方式 项目配置 1.iCloud 官网配置 2.本地Xcode配置 注意事项 一.key-value storage 1.获取默认store 2.写入 ...

  2. 微信小程序结合原生JS实现电商模板(二)

    接 <微信小程序结合原生JS实现电商模板(一)>,在首页列表加入购物车到购物和模块增删数量,动态计算商品价格实现后,本次提交主要实现了商品详情(还不完善)简单页面,从商品详情页跳转到购物车 ...

  3. 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理

    Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...

  4. 打靶笔记-04-vulnhub-Jangow

    打靶笔记-04-vulnhub-Jangow 前面两篇名称写成了vulhub,已经更改为vulnhub;vulhub的之后再找个时间集中打一遍. 一.靶机信息 Name: Jangow: 1.0.1 ...

  5. 《手把手教你》系列基础篇(七十八)-java+ selenium自动化测试-框架设计基础-TestNG依赖测试- 中篇(详解教程)

    1.简介 上一篇讲解了依赖测试的各种方法,今天继续讲解依赖测试的方法,这一篇主要是讲解和分享通过xml文件配置组名依赖方法( 主要是测试组的用法).废话不说,直接上干货. 2.实例 测试组:一个组可包 ...

  6. 【SEED Labs】TCP Attacks Lab

    Lab Overview 实验环境下载:https://seedsecuritylabs.org/Labs_16.04/Networking/TCP_Attacks/ 本实验涵盖以下课题: • TCP ...

  7. synchronized和Lock的区别是什么?

    原创2020-11-19 11:38:29011024区别:1.lock是一个接口,而synchronized是java的一个关键字.2.synchronized在发生异常时会自动释放占有的锁 ...

  8. 简述synchronized和java.util.concurrent.locks.Lock的异同 ?

    主要相同点:Lock能完成synchronized所实现的所有功能 主要不同点:Lock有比synchronized更精确的线程语义和更好的性能.synchronized会自动释放锁,而Lock一定要 ...

  9. 如何在Linux Centos上部署配置FastDFS

    一.准备工作: 1.准备下面包文件 -- FastDFS_v5.08.tar.gz -- libevent-2.0.22-stable.tar.gz -- libfastcommon-master.z ...

  10. Gradle 使用@Value注册编译报错

    报错信息:Expected '$(student - name)' to be an inline constant of type java.lang.String in @org.springfr ...