イメージビューア

スタンドアロンの画像ビューアで、 ImageSource (URL、base64、または生のバイト)をレンダリングし、その上にオプションのクロームを重ねます:枠付きフレーム、回転/反転/ズーム/フルスクリーン機能付きのツールバー、ダウンロードボタン、トリミング操作。列縛り編集(ドロップゾーン、アップロード、検証)には代わりに ImageEdit を使います。

裸のまま

デフォルト — 親と同じくらいの <img> 。クロームもありません。

Reactの例
ブレイザーの例
600x400.png
React TypeScript
Razor

フレームド+ダウンロード

枠、パッド、コーナーのダウンロードボタンを追加します。これが ImageEdit が使う読み取り専用プレビュー形状です。

Reactの例
ブレイザーの例
placeholder.png
React TypeScript
Razor

ツールバー

回転(CCW/CW)、フリップ(H/V)、ズームイン/アウト、リセット、フルスクリーン、ダウンロードボタンを追加できます。画像はホイールズーム(カーソルに固定)に反応し、1×を超えてズームするとドラッグ・トゥ・パンに反応します。

Reactの例
ブレイザーの例
placeholder.png
React TypeScript
Razor

ツールバー+クロッピング可能

アスペクト比ピッカーとクロップボタンを有効にします。画像を左ドラッグすると、選択したアスペクトに制約された線状の選択長方形が描かれます。トリミングを押すと、選択部分がオフスクリーンのキャンバスからPNGにラスター化され、 OnCropAppliedが起動します。ビューアはトリミングされた結果を表示します。リセットすると元のソースに戻ります。

Reactの例
ブレイザーの例
placeholder.png
React TypeScript
Razor
反応してください ブレイザー

ImageViewer クラス

パラメータ

名称
種類
デフォルト
概要
Altstring?
Croppablebool
False
Downloadablebool
False
FallbackRenderFragment?
FileNamestring?
Framedbool
False
IsDirtybool
False
OutputFormatImageOutputFormat
Auto
OutputQualitydouble
0.9
SourceImageSource?
Toolbarbool
False
名称: 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

イベント

名称
種類
概要
OnCancelEventCallback
OnClickEventCallback<MouseEventArgs>
OnCropAppliedEventCallback<CropResult>
OnDirtyChangedEventCallback<bool>
OnSaveEventCallback
名称: OnCancel
種類: EventCallback
名称: OnClick
種類: EventCallback<MouseEventArgs>
名称: OnCropApplied
種類: EventCallback<CropResult>
名称: OnDirtyChanged
種類: EventCallback<bool>
名称: OnSave
種類: EventCallback

方法

名称
パラメータ
種類
概要
CommitAsyncTask<CropResult>
HandleContainerResizeImageMeasurements newMeasurements
void
HandleFullscreenChangebool isFullscreen
Task
HandleKeyDownstring key
bool shiftKey
Task
HandleWheeldouble deltaY
double cursorRelX
double cursorRelY
Task
ResetDirtyAsyncTask
RevertCropvoid
名称: CommitAsync
種類: Task<CropResult>
名称: HandleContainerResize
パラメータ: ImageMeasurements newMeasurements
種類: void
名称: HandleFullscreenChange
パラメータ: bool isFullscreen
種類: Task
名称: HandleKeyDown
パラメータ: string key
bool shiftKey
種類: Task
名称: HandleWheel
パラメータ: double deltaY
double cursorRelX
double cursorRelY
種類: Task
名称: ResetDirtyAsync
種類: Task
名称: RevertCrop
種類: void