ImageViewer
Standalone image viewer that renders an ImageSource (URL, base64, or raw bytes) and
layers optional chrome on top: a bordered frame, a toolbar with rotate / flip / zoom / fullscreen,
download buttons, and crop interactions. For column-bound editing (drop zone, upload, validation)
use ImageEdit instead.
Bare
Default — a plain <img> sized to its parent. No chrome.
Framed + Downloadable
Adds a border, padding, and a corner download button. This is the read-only preview shape ImageEdit uses.
Toolbar
Adds rotate (CCW/CW), flip (H/V), zoom in/out, reset, fullscreen, and download buttons. The image responds to wheel-zoom (anchored at the cursor) and, when zoomed past 1×, drag-to-pan.
Toolbar + Croppable
Enables an aspect-ratio picker and a Crop button. Left-drag on the image draws a dashed selection
rectangle (constrained to the chosen aspect). Pressing Crop rasterizes the selection to PNG via
an offscreen canvas and fires OnCropApplied; the viewer then displays the cropped
result. Reset reverts to the original source.
ImageViewer components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.class
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.parameters
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name | components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type | components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.default | components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.description |
|---|---|---|---|
Alt | string? | ||
Croppable | bool | False | |
Downloadable | bool | False | |
Fallback | RenderFragment? | ||
FileName | string? | ||
Framed | bool | False | |
IsDirty | bool | False | |
OutputFormat | ImageOutputFormat | Auto | |
OutputQuality | double | 0.9 | |
Source | ImageSource? | ||
Toolbar | bool | False |
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
Altcomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
string?
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
Croppablecomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
bool
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.default:
False
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
Downloadablecomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
bool
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.default:
False
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
Fallbackcomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
RenderFragment?
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
FileNamecomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
string?
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
Framedcomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
bool
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.default:
False
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
IsDirtycomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
bool
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.default:
False
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
OutputFormatcomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
ImageOutputFormat
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.default:
Auto
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
OutputQualitycomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
double
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.default:
0.9
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
Sourcecomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
ImageSource?
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
Toolbarcomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
bool
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.default:
False
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.events
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name | components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type | components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.description |
|---|---|---|
OnCancel | EventCallback | |
OnClick | EventCallback<MouseEventArgs> | |
OnCropApplied | EventCallback<CropResult> | |
OnDirtyChanged | EventCallback<bool> | |
OnSave | EventCallback |
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
OnCancelcomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
EventCallback
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
OnClickcomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
EventCallback<MouseEventArgs>
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
OnCropAppliedcomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
EventCallback<CropResult>
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
OnDirtyChangedcomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
EventCallback<bool>
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
OnSavecomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
EventCallback
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.methods
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name | components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.parameters | components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type | components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.description |
|---|---|---|---|
CommitAsync | Task<CropResult> | ||
HandleFullscreenChange | bool isFullscreen | Task | |
HandleKeyDown | string key bool shiftKey | Task | |
HandleWheel | double deltaY double cursorRelX double cursorRelY | Task | |
ResetDirtyAsync | Task | ||
RevertCrop | void |
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
CommitAsynccomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
Task<CropResult>
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
HandleFullscreenChangecomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.parameters:
bool isFullscreen
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
Task
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
HandleKeyDowncomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.parameters:
string key
bool shiftKey
bool shiftKey
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
Task
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
HandleWheelcomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.parameters:
double deltaY
double cursorRelX
double cursorRelY
double cursorRelX
double cursorRelY
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
Task
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
ResetDirtyAsynccomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
Task
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name:
RevertCropcomponents.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type:
void