Bootstrap Blazor Viewer 图片浏览器 组件更新, 支持流转图片(ImageFromStream), 用于本地项目例如 MAUI Blazor,Blazor hybrid

示例:

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:imagesobjects.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