示例:

https://blazor.app1.es/viewer

使用方法:

1.nuget包

BootstrapBlazor.Viewer

2._Imports.razor 文件 或者页面添加 添加组件库引用

@using BootstrapBlazor.Components

3.razor页面

Demo

<Viewerjs />

多图片

<Viewerjs Images='new List<string>() { "photo-2.jpg","photo-1.jpg","photo-3.jpg"}' />

单图片

<Viewerjs Src="@_srcPhoto" Width="600px" Height="300px" />

单图片+简化工具条

<Viewerjs Src="@_srcPhoto" Width="600px" Height="300px" toolbarlite="true" />

多图片+简化工具条

<Viewerjs Images='new List<string>() { "photo-2.jpg","photo-1.jpg","photo-3.jpg"}' toolbarlite="true" />

单图片流

<Viewer SrcStream="imagesStreamList[1]" />

多图片流

<Viewer ImagesStream="imagesStreamList" />

本地单图片,组件流读取

<Viewer Src='@(@"F:\images\objects.jpg")' LocalFileToStream />

4.参数说明

类型 参数 说明 默认值 备注
bool UseBuiltinImageDiv 使用内置图片DIV true
List<string> Images 图片列表DIV
string Src 单图片
List<string> Alts 图片名称列表
bool toolbarlite 简化版工具条 false
string Height 400px
string Width 400px
string ID 组件ID
List<Stream> ImagesStream 图片流列表
Stream SrcStream 单图片流
bool LocalFileToStream 使用流读取本地图片 false

更新历史

v7.0.2

  • 支持流转图片(ImageFromStream), 用于本地项目例如 MAUI Blazor,Blazor hybrid,因为chorome不支持file:///xx 方式显示本地图片
  • 添加 ImagesStream : 图片流列表
  • SrcStream : 单图片流
  • LocalFileToStream : 使用流读取本地图片

Blazor 组件

条码扫描 ZXingBlazor



图片浏览器 Viewer

条码扫描 BarcodeScanner

手写签名 Handwritten

手写签名 SignaturePad

定位/持续定位 Geolocation

屏幕键盘 OnScreenKeyboard

百度地图 BaiduMap

谷歌地图 GoogleMap

蓝牙和打印 Bluetooth

PDF阅读器 PdfReader

文件系统访问 FileSystem

光学字符识别 OCR

电池信息/网络信息 WebAPI

视频播放器 VideoPlayer

最新文章

  1. JavaScipt 数据交互
  2. android开发------初识Activity
  3. php数据库封装与引用方法
  4. 转:mysql 创建一个用户,指定一个数据库
  5. web前端开发(5)
  6. freeCodeCamp:Search and Replace
  7. [每日一题] 11gOCP 1z0-053 :2013-10-11 Flashback Data Archive属性.........................43
  8. SQL Server是如何让定时作业
  9. ZOJ1586——QS Network(最小生成树)
  10. Win8.1 与 pl2303驱动
  11. LightOj_1104 Birthday Paradox
  12. HTML&amp;CSS基础学习笔记1.12—引入样式表
  13. javascript动态创建对象
  14. python——文件操作
  15. Git操作中crlf和lf冲突问题
  16. 老生常谈:Windows的7类安全漏洞
  17. python之路--BOM和DOM
  18. Servlet工作原理解析
  19. typeof引发的思考
  20. 百练6183-人民币支付-2014正式A题

热门文章

  1. 恭喜磊哥喜提n+1
  2. orcle恢复报错:ORA-00392: 日志 2 (用于线程 1) 正被清除, 不允许操作
  3. 基于python的数学建模---分支定界算法
  4. Scala- Cannot run program &quot;powershell.exe&quot;: CreateProcess error=5, 拒绝访问
  5. i春秋Login
  6. C# Math 中的常用的数学运算
  7. KVC原理与数据筛选
  8. day28-jQuery01
  9. Zabbix技术分享——监控windows进程资源使用情况
  10. 大数据HDFS凭啥能存下百亿数据?