示例:
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
经验首页