ImageViewer

Eigenständiger Bildviewer, der eine ImageSource (URL, base64 oder Rohbytes) rendert und optionale Chrome-Schichten oben drauflegt: einen umrandeten Rahmen, eine Symbolleiste mit Drehen / Umblättern / Zoomen / Vollbild, Download-Buttons und Zuschneide-Interaktionen. Für spaltengebundene Bearbeitung (Dropzone, Upload, Validierung) verwenden ImageEdit Sie stattdessen.

Nackt

Standard – eine einfache <img> Größe im Vergleich zu ihrem Elternsystem. Kein Chrom.

React-Beispiel
Blazor-Beispiel
600x400.png
React TypeScript
Razor

Gerahmt + herunterladbar

Fügt einen Rand, eine Polsterung und einen Eck-Download-Button hinzu. Dies ist die nur-lesebasierte Vorschauform, ImageEdit die verwendet wird.

React-Beispiel
Blazor-Beispiel
placeholder.png
React TypeScript
Razor

Werkzeugleiste

Fügt Drehen (CCW/CW), Umdrehen (H/V), Zoomen/Rauszoomen, Zurücksetzen, Vollbild- und Download-Buttons hinzu. Das Bild reagiert auf Rad-Zoom (am Cursor verankert) und beim Überschreiten von 1× auf Drag-to-Pan.

React-Beispiel
Blazor-Beispiel
placeholder.png
React TypeScript
Razor

Werkzeugleiste + Kürzerbar

Ermöglicht einen Aspektverhältnis-Picker und eine Zuschneide-Taste. Das linke Ziehen auf dem Bild zeichnet ein gestricheltes Auswahlrechteck (auf den gewählten Aspekt beschränkt). Das Drücken von "Zuschneiden" rasterisiert die Auswahl zu PNG über eine Offscreen-Leinwand und startet OnCropApplied; der Betrachter zeigt dann das zugeschnittene Ergebnis an. Der Reset setzt auf die ursprüngliche Quelle zurück.

React-Beispiel
Blazor-Beispiel
placeholder.png
React TypeScript
Razor
Reagieren Blazor

ImageViewer Baureihe

Parameter

Name
Typ
Default
Beschreibung
Altstring?
Zugänglicher Alternativtext. Standardmäßig aktiviert ImageViewer.FileName , wenn nicht gesetzt.
Croppablebool
False
Wenn wahr (und ImageViewer.Toolbar auch wahr ist), ermöglicht Crop-Interaktionen: die Symbolleiste erhält einen Aspektverhältnis-Picker und eine Schaltfläche 'Zuschneiden'; Links-Drag auf der Das Bild zeichnet ein gestricheltes Auswahlrechteck. Das Drücken von Crop rasterisiert die Auswahl auf PNG und feuert ImageViewer.OnCropApplied; der Betrachter zeigt dann die Beschnittenes Ergebnis. Reset setzt auf das Original ImageViewer.Sourcezurück. Das Setzen fügt außerdem crossorigin='anonymous' zum <img hinzu> so kann der Rasterizer die Pixel über toBlob zurücklesen. Für ImageSource.url Quellen – das heißt, der entfernte Server muss senden Access-Control-Allow-Origin, damit das Bild überhaupt geladen werden kann; wenn es wechselt nicht zu ImageSource.Bytes (das auf denselben Ursprung aufgelöst wird) Daten-URL und unterliegt nicht Canvas-Tainting).
Downloadablebool
False
Wenn zutreffend, gibt es eine Download-UX frei: Mit ImageViewer.Toolbarfügt ein Download-Button in die Werkzeugleiste hinzu. Mit (ohne Werkzeugleiste ImageViewer.Framed ) wird in der Ecke eine Overlay-Schaltfläche gerendert. Ohne beides macht das Bild selbst zum Herunterladen möglich.
FallbackRenderFragment?
Gerendert, wenn ImageViewer.Source null ist.
FileNamestring?
Dateiname, der beim Herunterladen verwendet wird und als Standardtext ImageViewer.Alt . Greift auf das eigene ImageSource.FileName, ansonsten 'Bild' der Quelle zurück.
Framedbool
False
Wenn true, wird das Bild in ein Fluent-tokened Rahmen-Matching eingewickelt der von ImageEdit verwendete Read-only-Vorschau-Stil. Standard falsch (bare img).
IsDirtybool
False
Aktueller schmutziger Zustand – wahr, wenn das angezeigte Bild sich von der Basislinie (Rotation, Umdrehen oder angepflanzter Schnitt). Reiner Ansichtszustand (Zoom, Pan) Schaltet Dirty nicht von selbst um.
OutputFormatImageOutputFormat
Auto
Ausgabeformat für das rasterisierte Ausschnittergebnis (und das committierte Bild) Bytes aus ImageViewer.CommitAsync). Standardeinstellungen zu ImageOutputFormat.Auto — das Format stammt aus dem Die Endung der Quelldatei (JPEG-Eingaben bleiben JPEG, alles andere wird ausgegeben PNG). Pinnen auf ImageOutputFormat.Png für verlustfreie Schreibvorgänge unabhängig von der Quelle, oder ImageOutputFormat.Jpeg für Größenabhängige Fotofließe.
OutputQualitydouble
0,9
JPEG-Qualität in [0, 1]. Ignoriert, wenn ImageViewer.OutputFormat ist ImageOutputFormat.Png (PNG ist verlustfrei und hat keine Qualitätsknopf). Standardeinstellung 0,9 – visuell nicht zu unterscheiden vom Original für die meisten Fotos, während ich trotzdem viel im Vergleich zu PNG speichert.
SourceImageSource?
Bilddaten zum Rendern. Wenn null, ImageViewer.Fallback wird gerendert stattdessen (oder gar nichts, wenn kein Rückfall bereitgestellt wird).
Toolbarbool
False
Wenn zutreffend, rendert er eine Symbolleiste über dem Bild mit Drehen / Umdrehen / Zoomen / Reset / Vollbildsteuerung. Impliziert ein Wrapper-Element unabhängig von ImageViewer.Framed. Das Drag-to-Pan auf dem Bild wird verfügbar, wenn Vorbei 1×.
Name: Alt
Typ: string?
Beschreibung: Zugänglicher Alternativtext. Standardmäßig aktiviert ImageViewer.FileName , wenn nicht gesetzt.
Name: Croppable
Typ: bool
Default: False
Beschreibung: Wenn wahr (und ImageViewer.Toolbar auch wahr ist), ermöglicht Crop-Interaktionen: die Symbolleiste erhält einen Aspektverhältnis-Picker und eine Schaltfläche 'Zuschneiden'; Links-Drag auf der Das Bild zeichnet ein gestricheltes Auswahlrechteck. Das Drücken von Crop rasterisiert die Auswahl auf PNG und feuert ImageViewer.OnCropApplied; der Betrachter zeigt dann die Beschnittenes Ergebnis. Reset setzt auf das Original ImageViewer.Sourcezurück. Das Setzen fügt außerdem crossorigin='anonymous' zum <img hinzu> so kann der Rasterizer die Pixel über toBlob zurücklesen. Für ImageSource.url Quellen – das heißt, der entfernte Server muss senden Access-Control-Allow-Origin, damit das Bild überhaupt geladen werden kann; wenn es wechselt nicht zu ImageSource.Bytes (das auf denselben Ursprung aufgelöst wird) Daten-URL und unterliegt nicht Canvas-Tainting).
Name: Downloadable
Typ: bool
Default: False
Beschreibung: Wenn zutreffend, gibt es eine Download-UX frei: Mit ImageViewer.Toolbarfügt ein Download-Button in die Werkzeugleiste hinzu. Mit (ohne Werkzeugleiste ImageViewer.Framed ) wird in der Ecke eine Overlay-Schaltfläche gerendert. Ohne beides macht das Bild selbst zum Herunterladen möglich.
Name: Fallback
Typ: RenderFragment?
Beschreibung: Gerendert, wenn ImageViewer.Source null ist.
Name: FileName
Typ: string?
Beschreibung: Dateiname, der beim Herunterladen verwendet wird und als Standardtext ImageViewer.Alt . Greift auf das eigene ImageSource.FileName, ansonsten 'Bild' der Quelle zurück.
Name: Framed
Typ: bool
Default: False
Beschreibung: Wenn true, wird das Bild in ein Fluent-tokened Rahmen-Matching eingewickelt der von ImageEdit verwendete Read-only-Vorschau-Stil. Standard falsch (bare img).
Name: IsDirty
Typ: bool
Default: False
Beschreibung: Aktueller schmutziger Zustand – wahr, wenn das angezeigte Bild sich von der Basislinie (Rotation, Umdrehen oder angepflanzter Schnitt). Reiner Ansichtszustand (Zoom, Pan) Schaltet Dirty nicht von selbst um.
Name: OutputFormat
Typ: ImageOutputFormat
Default: Auto
Beschreibung: Ausgabeformat für das rasterisierte Ausschnittergebnis (und das committierte Bild) Bytes aus ImageViewer.CommitAsync). Standardeinstellungen zu ImageOutputFormat.Auto — das Format stammt aus dem Die Endung der Quelldatei (JPEG-Eingaben bleiben JPEG, alles andere wird ausgegeben PNG). Pinnen auf ImageOutputFormat.Png für verlustfreie Schreibvorgänge unabhängig von der Quelle, oder ImageOutputFormat.Jpeg für Größenabhängige Fotofließe.
Name: OutputQuality
Typ: double
Default: 0,9
Beschreibung: JPEG-Qualität in [0, 1]. Ignoriert, wenn ImageViewer.OutputFormat ist ImageOutputFormat.Png (PNG ist verlustfrei und hat keine Qualitätsknopf). Standardeinstellung 0,9 – visuell nicht zu unterscheiden vom Original für die meisten Fotos, während ich trotzdem viel im Vergleich zu PNG speichert.
Name: Source
Typ: ImageSource?
Beschreibung: Bilddaten zum Rendern. Wenn null, ImageViewer.Fallback wird gerendert stattdessen (oder gar nichts, wenn kein Rückfall bereitgestellt wird).
Name: Toolbar
Typ: bool
Default: False
Beschreibung: Wenn zutreffend, rendert er eine Symbolleiste über dem Bild mit Drehen / Umdrehen / Zoomen / Reset / Vollbildsteuerung. Impliziert ein Wrapper-Element unabhängig von ImageViewer.Framed. Das Drag-to-Pan auf dem Bild wird verfügbar, wenn Vorbei 1×.

Veranstaltungen

Name
Typ
Beschreibung
OnCancelEventCallback
Setzt man zusammen mit ImageViewer.Toolbar, macht ein Rot verboten – Kreis-Button am rechten Ende der Werkzeugleiste. Immer aktiviert. Konsumenten nutzen dies typischerweise, um den Edit-Modus zu beenden und während des Prozesses zu verwerfen transformiert – der Betrachter setzt nichts automatisch zurück; Wieder einbauen (z. B. über @key) oder aktualisieren ImageViewer.Source Seinen inneren Zustand löschen.
OnClickEventCallback<MouseEventArgs>
Klicke auf Handler auf der <img>. Unterdrückt den Click-to-Download-Fallback.
OnCropAppliedEventCallback<CropResult>
Feuert, wenn der Nutzer einen Crop ausführt. Empfängt die rasterisierte PNG-Nutzlast.
OnDirtyChangedEventCallback<bool>
Feuert, wann immer ImageViewer.IsDirty sich etwas ändert. Bedient die Speichertaste eines Elternteils Aktivierte den Bundesstaat ohne Umfragen.
OnSaveEventCallback
Setzt man zusammen mit ImageViewer.Toolbar, ergibt ein grünes Häkchen Schaltfläche am rechten Ende der Symbolleiste. Der Knopf ist deaktiviert, während Der Betrachter ist sauber – es gibt nichts zu retten. Clickhandler ist Feuer- und-vergessen; Der Verbraucher ruft typischerweise an ImageViewer.CommitAsync von hier, um das ausgestellte Bild zu backen Bytes für Persistenz. Entwickelt für den ImageEdit-Edit-Modus-Fluss (Commit Back-Edits) in die gebundene Spalte). Eigenständige Verbraucher können es auf die gleiche Weise nutzen.
Name: OnCancel
Typ: EventCallback
Beschreibung: Setzt man zusammen mit ImageViewer.Toolbar, macht ein Rot verboten – Kreis-Button am rechten Ende der Werkzeugleiste. Immer aktiviert. Konsumenten nutzen dies typischerweise, um den Edit-Modus zu beenden und während des Prozesses zu verwerfen transformiert – der Betrachter setzt nichts automatisch zurück; Wieder einbauen (z. B. über @key) oder aktualisieren ImageViewer.Source Seinen inneren Zustand löschen.
Name: OnClick
Typ: EventCallback<MouseEventArgs>
Beschreibung: Klicke auf Handler auf der <img>. Unterdrückt den Click-to-Download-Fallback.
Name: OnCropApplied
Typ: EventCallback<CropResult>
Beschreibung: Feuert, wenn der Nutzer einen Crop ausführt. Empfängt die rasterisierte PNG-Nutzlast.
Name: OnDirtyChanged
Typ: EventCallback<bool>
Beschreibung: Feuert, wann immer ImageViewer.IsDirty sich etwas ändert. Bedient die Speichertaste eines Elternteils Aktivierte den Bundesstaat ohne Umfragen.
Name: OnSave
Typ: EventCallback
Beschreibung: Setzt man zusammen mit ImageViewer.Toolbar, ergibt ein grünes Häkchen Schaltfläche am rechten Ende der Symbolleiste. Der Knopf ist deaktiviert, während Der Betrachter ist sauber – es gibt nichts zu retten. Clickhandler ist Feuer- und-vergessen; Der Verbraucher ruft typischerweise an ImageViewer.CommitAsync von hier, um das ausgestellte Bild zu backen Bytes für Persistenz. Entwickelt für den ImageEdit-Edit-Modus-Fluss (Commit Back-Edits) in die gebundene Spalte). Eigenständige Verbraucher können es auf die gleiche Weise nutzen.

Methoden

Name
Parameter
Typ
Beschreibung
CommitAsyncTask<CropResult>
Backt das aktuell angezeigte Bild – einschließlich beliebiger Rotation und flippt – in eine PNG in Quellauflösung. Gibt null zurück, wenn die Viewer ist sauber (nichts zu speichern) oder bevor der JS-Handle hat Angehängt. Jede noch nicht durchgeführte Pflanzenauswahl über die Zuschneide-Schaltfläche absichtlich ignoriert wird; Klicke auf Zuschneiden zuerst, wenn Du willst, dass es eingebacken ist.
HandleContainerResizeImageMeasurements newMeasurements
void
Container-Resize-Callback — der JS-seitige ResizeObserver feuert diesen (rAF- debounced), wenn sich die Box des Bildcontainers von außerhalb unseres Zustands ändert. (ein Elternteil wird gedehnt/verkleinert, das Panel fließt um). Das Bild passt neu an über Object-Fit:Contain, sodass die Container-Pixel-Koordinaten der Crop-Auswahl keine Koordinaten haben Längere Reihen mit demselben Bildinhalt auf. Verankern Sie es erneut mit demselben Capture-old → refresh → reproject-new round-trip HandleFullscreenChange(System.Boolean) Anwendungen: Snapshot der Auswahl in natürlichen Pixelkoordinaten gegen die PRE-Resize Messungen, die wir noch halten, aktualisieren Sie die POST-Resize-Messungen, dann Projiziere zurück. Mitten im Drag übersprungen – die Drag Handler besitzen die Auswahlgeometrie (und erwischte ihr eigenes Klemmfenster beim Zugstart).
HandleFullscreenChangebool isFullscreen
Task
Dokumentenebene Fullscreen-Change-Callback — JS meldet, ob der Das Wrapper-Element ist derzeit das Vollbild-Element des Dokuments. Esc-Out Es läuft hier auch durch (es geht nicht über den Button in der Symbolleiste).
HandleKeyDownstring key
bool shiftKey
Task
JS-gesteuerte Keydown-Rückrufe für die Schnittmodus-Verknüpfungen. Nur Feuer für die von uns beanspruchten Schlüssel (der JS-Shim filtert nach Schlüssel + Modifikatorzustand), Wir müssen diese Methode also nicht selbst sperren. Entkommen – aufrufen ImageViewer.OnCancel (wenn verdrahtet). Geben Sie ein – die Auswahl als Ausschnitt eintragen, falls vorhanden ist ≥ 5×5; Ansonsten rufen ImageViewer.OnSave Sie an, wenn es unsauber ist. + / = / - /_ — Zoomen rinn/raus. 0 — Zoom zurücksetzen + zur Identität schwenken. Löschen / Rücktaste – die Auswahl löschen. Pfeiltasten – die Auswahl 1 px (10 px mit Shift) verschieben.
HandleWheeldouble deltaY
double cursorRelX
double cursorRelY
Task
Wheel-Zoom-Callback — JS leitet jeden Scroll-Tick (deltaY) plus die Cursor versetzt vom Containerzentrum. Verankerte Zoom-Mathematik folgt React: pan_new = (1 − r) · cursorRel + r · pan_prev wo r = zoom_new / zoom_prev. Hält den Cursor über demselben Bild-lokal Zeige über den Zoom-Schritt.
ResetDirtyAsyncTask
Markiert den Betrachter sauber, ohne das angezeigte Bild zu verändern. Verwendung nach einem Erfolgreiches Speichern: Die zugeschnittenen Bytes sind jetzt die gespeicherte Version, also zukünftige Veränderungen sollten an diesem Zustand gemessen werden. Um das angezeigte Bild zurückzusetzen Bild zum Original ImageViewer.Source UND reinigen Sie schmutzig, verwenden Sie den Reset Toolbar-Button oder Update ImageViewer.Source.
RevertCropvoid
Entfernt nur die lokale Crop-Overlay – kehrt zum Original zurück ImageViewer.Source. Rotation und Flips bleiben dort, wo der Nutzer sie hat, Wenn sich diese also seit dem letzten Speicherstand geändert haben, ImageViewer.IsDirty könnte das Bleib treu. Verwenden Sie den Reset-Button der Toolbar (oder aktualisieren Sie ImageViewer.Source) für eine vollständige Rücksetzung.
Name: CommitAsync
Typ: Task<CropResult>
Beschreibung: Backt das aktuell angezeigte Bild – einschließlich beliebiger Rotation und flippt – in eine PNG in Quellauflösung. Gibt null zurück, wenn die Viewer ist sauber (nichts zu speichern) oder bevor der JS-Handle hat Angehängt. Jede noch nicht durchgeführte Pflanzenauswahl über die Zuschneide-Schaltfläche absichtlich ignoriert wird; Klicke auf Zuschneiden zuerst, wenn Du willst, dass es eingebacken ist.
Name: HandleContainerResize
Parameter: ImageMeasurements newMeasurements
Typ: void
Beschreibung: Container-Resize-Callback — der JS-seitige ResizeObserver feuert diesen (rAF- debounced), wenn sich die Box des Bildcontainers von außerhalb unseres Zustands ändert. (ein Elternteil wird gedehnt/verkleinert, das Panel fließt um). Das Bild passt neu an über Object-Fit:Contain, sodass die Container-Pixel-Koordinaten der Crop-Auswahl keine Koordinaten haben Längere Reihen mit demselben Bildinhalt auf. Verankern Sie es erneut mit demselben Capture-old → refresh → reproject-new round-trip HandleFullscreenChange(System.Boolean) Anwendungen: Snapshot der Auswahl in natürlichen Pixelkoordinaten gegen die PRE-Resize Messungen, die wir noch halten, aktualisieren Sie die POST-Resize-Messungen, dann Projiziere zurück. Mitten im Drag übersprungen – die Drag Handler besitzen die Auswahlgeometrie (und erwischte ihr eigenes Klemmfenster beim Zugstart).
Name: HandleFullscreenChange
Parameter: bool isFullscreen
Typ: Task
Beschreibung: Dokumentenebene Fullscreen-Change-Callback — JS meldet, ob der Das Wrapper-Element ist derzeit das Vollbild-Element des Dokuments. Esc-Out Es läuft hier auch durch (es geht nicht über den Button in der Symbolleiste).
Name: HandleKeyDown
Parameter: string key
bool shiftKey
Typ: Task
Beschreibung: JS-gesteuerte Keydown-Rückrufe für die Schnittmodus-Verknüpfungen. Nur Feuer für die von uns beanspruchten Schlüssel (der JS-Shim filtert nach Schlüssel + Modifikatorzustand), Wir müssen diese Methode also nicht selbst sperren. Entkommen – aufrufen ImageViewer.OnCancel (wenn verdrahtet). Geben Sie ein – die Auswahl als Ausschnitt eintragen, falls vorhanden ist ≥ 5×5; Ansonsten rufen ImageViewer.OnSave Sie an, wenn es unsauber ist. + / = / - /_ — Zoomen rinn/raus. 0 — Zoom zurücksetzen + zur Identität schwenken. Löschen / Rücktaste – die Auswahl löschen. Pfeiltasten – die Auswahl 1 px (10 px mit Shift) verschieben.
Name: HandleWheel
Parameter: double deltaY
double cursorRelX
double cursorRelY
Typ: Task
Beschreibung: Wheel-Zoom-Callback — JS leitet jeden Scroll-Tick (deltaY) plus die Cursor versetzt vom Containerzentrum. Verankerte Zoom-Mathematik folgt React: pan_new = (1 − r) · cursorRel + r · pan_prev wo r = zoom_new / zoom_prev. Hält den Cursor über demselben Bild-lokal Zeige über den Zoom-Schritt.
Name: ResetDirtyAsync
Typ: Task
Beschreibung: Markiert den Betrachter sauber, ohne das angezeigte Bild zu verändern. Verwendung nach einem Erfolgreiches Speichern: Die zugeschnittenen Bytes sind jetzt die gespeicherte Version, also zukünftige Veränderungen sollten an diesem Zustand gemessen werden. Um das angezeigte Bild zurückzusetzen Bild zum Original ImageViewer.Source UND reinigen Sie schmutzig, verwenden Sie den Reset Toolbar-Button oder Update ImageViewer.Source.
Name: RevertCrop
Typ: void
Beschreibung: Entfernt nur die lokale Crop-Overlay – kehrt zum Original zurück ImageViewer.Source. Rotation und Flips bleiben dort, wo der Nutzer sie hat, Wenn sich diese also seit dem letzten Speicherstand geändert haben, ImageViewer.IsDirty könnte das Bleib treu. Verwenden Sie den Reset-Button der Toolbar (oder aktualisieren Sie ImageViewer.Source) für eine vollständige Rücksetzung.