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.

Exemple de réaction
Exemple de Blazor
600x400.png
React TypeScript
Razor

Framed + Downloadable

Adds a border, padding, and a corner download button. This is the read-only preview shape ImageEdit uses.

Exemple de réaction
Exemple de Blazor
placeholder.png
React TypeScript
Razor

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.

Exemple de réaction
Exemple de Blazor
placeholder.png
React TypeScript
Razor

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.

Exemple de réaction
Exemple de Blazor
placeholder.png
React TypeScript
Razor
Réagir Blazor

ImageViewer Classe

Paramètres

Nom
Type
Par défaut
Description
Altstring?
Texte alternatif accessible. Par défaut, ImageViewer.FileName si c’est pas réglé.
Croppablebool
False
Lorsque c’est vrai (et ImageViewer.Toolbar est aussi vrai), cela permet les interactions avec les cultures : la barre d’outils dispose d’un sélecteur au format d’aspect et d’un bouton Recadrer ; Traction à gauche sur le L’image dessine un rectangle de sélection en pointillés. Appuyer sur Recadrer rastérise la sélection vers PNG et tire ImageViewer.OnCropApplied; le visionneur affiche alors le Résultat recadré. Le reset revient à l’original ImageViewer.Source. En réglant cela, on ajoute aussi crossorigin='anonymous » à l'< img > donc le rastériseur peut lire les pixels via toBlob. Pour ImageSource.Url signifie que le serveur distant doit envoyer Access-Control-Allow-Origin pour que l’image se charge tout court ; si c’est ne le fait pas, bascule sur ImageSource.Bytes (qui se résout vers une même origine et n’est pas soumise à la contamination du canvas).
Downloadablebool
False
Lorsque c’est vrai, cela expose une expérience utilisateur en téléchargement : Avec ImageViewer.Toolbar, ajoute un bouton de téléchargement à la barre d’outils. Avec ImageViewer.Framed (sans barre d’outils), affiche un bouton de superposition dans le coin. Sans aucun des deux, l’image elle-même devient un clic pour télécharger.
FallbackRenderFragment?
Affiché lorsque ImageViewer.Source est nul.
FileNamestring?
Nom de fichier utilisé lors du téléchargement et comme texte par défautImageViewer.Alt. Cela revient à l’image de la source, ImageSource.FileNamesinon « image ».
Framedbool
False
Lorsque c’est vrai, l’image est enveloppée dans une image bordée par Fluent-token, correspondant le style de prévisualisation en lecture seule utilisé par ImageEdit. Faux par défaut (imagine nue).
IsDirtybool
False
État actuel de saleté — vrai lorsque l’image affichée diffère de la Base (rotation, retournement ou culture appliquée). État de vue pur (zoom, panoramique) Ça ne se désactive pas tout seul.
OutputFormatImageOutputFormat
Auto
Format de sortie pour le résultat de recadrage rasterisé (et l’image engagée octets de ImageViewer.CommitAsync). Par défaut à ImageOutputFormat.Auto — le format est dérivé du extension du fichier source (les entrées JPEG restent JPEG, tout le reste émet PNG). Pin to ImageOutputFormat.Png pour les écritures sans perte quelle que soit la source, ou ImageOutputFormat.Jpeg pour Flux photo sensibles à la taille.
OutputQualitydouble
0,9
Qualité JPEG en [0, 1]. Ignoré quand ImageViewer.OutputFormat est ImageOutputFormat.Png (PNG est sans perte et n’a pas bouton de qualité). Par défaut à 0,9 — visuellement indiscernable De l’original pour la plupart des photos tout en économisant beaucoup par rapport à PNG.
SourceImageSource?
Données d’image à rendre. Lorsque nulle, ImageViewer.Fallback est rendue à la place (ou rien si aucun plan de rechange n’est fourni).
Toolbarbool
False
Lorsque c’est vrai, affiche une barre d’outils au-dessus de l’image avec rotation / retournement / zoom / Réinitialisation / contrôle plein écran. Implique un élément enveloppeur indépendamment de ImageViewer.Framed. Le glisser-to-pan sur l’image devient disponible lorsque Passé 1×.
Nom: Alt
Type: string?
Description: Texte alternatif accessible. Par défaut, ImageViewer.FileName si c’est pas réglé.
Nom: Croppable
Type: bool
Par défaut: False
Description: Lorsque c’est vrai (et ImageViewer.Toolbar est aussi vrai), cela permet les interactions avec les cultures : la barre d’outils dispose d’un sélecteur au format d’aspect et d’un bouton Recadrer ; Traction à gauche sur le L’image dessine un rectangle de sélection en pointillés. Appuyer sur Recadrer rastérise la sélection vers PNG et tire ImageViewer.OnCropApplied; le visionneur affiche alors le Résultat recadré. Le reset revient à l’original ImageViewer.Source. En réglant cela, on ajoute aussi crossorigin='anonymous » à l'< img > donc le rastériseur peut lire les pixels via toBlob. Pour ImageSource.Url signifie que le serveur distant doit envoyer Access-Control-Allow-Origin pour que l’image se charge tout court ; si c’est ne le fait pas, bascule sur ImageSource.Bytes (qui se résout vers une même origine et n’est pas soumise à la contamination du canvas).
Nom: Downloadable
Type: bool
Par défaut: False
Description: Lorsque c’est vrai, cela expose une expérience utilisateur en téléchargement : Avec ImageViewer.Toolbar, ajoute un bouton de téléchargement à la barre d’outils. Avec ImageViewer.Framed (sans barre d’outils), affiche un bouton de superposition dans le coin. Sans aucun des deux, l’image elle-même devient un clic pour télécharger.
Nom: Fallback
Type: RenderFragment?
Description: Affiché lorsque ImageViewer.Source est nul.
Nom: FileName
Type: string?
Description: Nom de fichier utilisé lors du téléchargement et comme texte par défautImageViewer.Alt. Cela revient à l’image de la source, ImageSource.FileNamesinon « image ».
Nom: Framed
Type: bool
Par défaut: False
Description: Lorsque c’est vrai, l’image est enveloppée dans une image bordée par Fluent-token, correspondant le style de prévisualisation en lecture seule utilisé par ImageEdit. Faux par défaut (imagine nue).
Nom: IsDirty
Type: bool
Par défaut: False
Description: État actuel de saleté — vrai lorsque l’image affichée diffère de la Base (rotation, retournement ou culture appliquée). État de vue pur (zoom, panoramique) Ça ne se désactive pas tout seul.
Nom: OutputFormat
Type: ImageOutputFormat
Par défaut: Auto
Description: Format de sortie pour le résultat de recadrage rasterisé (et l’image engagée octets de ImageViewer.CommitAsync). Par défaut à ImageOutputFormat.Auto — le format est dérivé du extension du fichier source (les entrées JPEG restent JPEG, tout le reste émet PNG). Pin to ImageOutputFormat.Png pour les écritures sans perte quelle que soit la source, ou ImageOutputFormat.Jpeg pour Flux photo sensibles à la taille.
Nom: OutputQuality
Type: double
Par défaut: 0,9
Description: Qualité JPEG en [0, 1]. Ignoré quand ImageViewer.OutputFormat est ImageOutputFormat.Png (PNG est sans perte et n’a pas bouton de qualité). Par défaut à 0,9 — visuellement indiscernable De l’original pour la plupart des photos tout en économisant beaucoup par rapport à PNG.
Nom: Source
Type: ImageSource?
Description: Données d’image à rendre. Lorsque nulle, ImageViewer.Fallback est rendue à la place (ou rien si aucun plan de rechange n’est fourni).
Nom: Toolbar
Type: bool
Par défaut: False
Description: Lorsque c’est vrai, affiche une barre d’outils au-dessus de l’image avec rotation / retournement / zoom / Réinitialisation / contrôle plein écran. Implique un élément enveloppeur indépendamment de ImageViewer.Framed. Le glisser-to-pan sur l’image devient disponible lorsque Passé 1×.

Événements

Nom
Type
Description
OnCancelEventCallback
Lorsqu’on est combiné avec ImageViewer.Toolbar, rend un rouge interdit- bouton cercle à l’extrémité droite de la barre d’outils. Toujours activé. Les consommateurs utilisent généralement cela pour sortir du mode édition et les rejeter en cours Transforme — le spectateur ne réinitialise rien automatiquement de lui-même ; Le remonter (par exemple via @key) ou mettre à jour ImageViewer.Source vers effacer son état interne.
OnClickEventCallback<MouseEventArgs>
Cliquez sur le gestionnaire sur le < img>. Ça supprime la solution de recours au clic pour télécharger.
OnCropAppliedEventCallback<CropResult>
Déclenche lorsque l’utilisateur effectue une recadre. Reçoit la charge utile PNG rastérisée.
OnDirtyChangedEventCallback<bool>
Il tire dès qu’il ImageViewer.IsDirty change. Actionne le bouton Sauvegarde d’un parent État activé sans sondage.
OnSaveEventCallback
Lorsqu’elle est définie en même temps que ImageViewer.Toolbar, affiche une case verte à l’extrémité droite de la barre d’outils. Le bouton est désactivé pendant Le spectateur est propre — il n’y a rien à sauver. Le gestionnaire de clics est en feu- et-oublier ; le consommateur appelle généralement ImageViewer.CommitAsync de là pour cuire l’image affichée vers Octets pour la persistance. Conçu pour le flux de mode édition ImageEdit (commit edits back dans la colonne liée). Les consommateurs indépendants peuvent l’utiliser de la même manière.
Nom: OnCancel
Type: EventCallback
Description: Lorsqu’on est combiné avec ImageViewer.Toolbar, rend un rouge interdit- bouton cercle à l’extrémité droite de la barre d’outils. Toujours activé. Les consommateurs utilisent généralement cela pour sortir du mode édition et les rejeter en cours Transforme — le spectateur ne réinitialise rien automatiquement de lui-même ; Le remonter (par exemple via @key) ou mettre à jour ImageViewer.Source vers effacer son état interne.
Nom: OnClick
Type: EventCallback<MouseEventArgs>
Description: Cliquez sur le gestionnaire sur le < img>. Ça supprime la solution de recours au clic pour télécharger.
Nom: OnCropApplied
Type: EventCallback<CropResult>
Description: Déclenche lorsque l’utilisateur effectue une recadre. Reçoit la charge utile PNG rastérisée.
Nom: OnDirtyChanged
Type: EventCallback<bool>
Description: Il tire dès qu’il ImageViewer.IsDirty change. Actionne le bouton Sauvegarde d’un parent État activé sans sondage.
Nom: OnSave
Type: EventCallback
Description: Lorsqu’elle est définie en même temps que ImageViewer.Toolbar, affiche une case verte à l’extrémité droite de la barre d’outils. Le bouton est désactivé pendant Le spectateur est propre — il n’y a rien à sauver. Le gestionnaire de clics est en feu- et-oublier ; le consommateur appelle généralement ImageViewer.CommitAsync de là pour cuire l’image affichée vers Octets pour la persistance. Conçu pour le flux de mode édition ImageEdit (commit edits back dans la colonne liée). Les consommateurs indépendants peuvent l’utiliser de la même manière.

Méthodes

Nom
Paramètres
Type
Description
CommitAsyncTask<CropResult>
Fait cuire l’image actuellement affichée — y compris toute rotation et bascule — en PNG à la résolution source. Retourne nulle lorsque le le visualiseur est propre (rien à sauvegarder) ou avant que le pseudo JS ne soit attaché. Toute sélection de culture en cours qui n’a pas été engagée via le bouton Recadrer est intentionnellement ignoré ; cliquez sur Recadrer d’abord si Tu veux que ce soit bien intégré.
HandleFullscreenChangebool isFullscreen
Task
Rappel de changement en plein écran au niveau du document — JS rapporte si le L’élément wrapper est actuellement l’élément plein écran du document. Sortie de l’envoi Passe aussi par ici (il ne passe pas par le bouton de la barre d’outils).
HandleKeyDownstring key
bool shiftKey
Task
Rappel keydown piloté par JS pour les raccourcis en mode édition. Que des incendies pour les clés que nous revendiquons (les filtres JS par état clé + modificateur), Nous n’avons donc pas besoin de bloquer cette méthode elle-même. Évasion — invoque ImageViewer.OnCancel (si elle est câblée). Enter — commit la sélection comme un recadrage s’il y en a un ≥ 5×5 ; Sinon, invoquez ImageViewer.OnSave s’il est sale. + / = / - / _ — zoom in/out. 0 — réinitialiser le zoom + panoramique vers l’identité. Supprimer / Retour arrière — effacer la sélection. Flèches — poussez la sélection de 1 px (10 px avec Maj).
HandleWheeldouble deltaY
double cursorRelX
double cursorRelY
Task
Rappel en zoom sur roue — JS redirige chaque tick de défilement (deltaY) plus le Le curseur est décalé par rapport au centre du conteneur. Les calculs zoom ancrés suivent Réacte : pan_new = (1 − r) · curseurRel + r · pan_prev où r = zoom_new / zoom_prev. Garde le curseur au-dessus du même local-image Pointez à travers la marche de zoom.
ResetDirtyAsyncTask
Ça marque le visualiseur comme propre sans changer l’image affichée. Utilisation après un Sauvegarde réussie : Les octets recadrés sont désormais la version sauvegardée, donc Future Les changements doivent être mesurés par rapport à cet État. Pour revenir à l’affichage image à l’original ImageViewer.Source ET effacer la saleté, utilise la réinitialisation ou mettre à jour ImageViewer.Sourcela barre d’outils .
RevertCropvoid
Supprime uniquement la superposition locale des cultures — revient à l’original ImageViewer.Source. La rotation et les flips restent là où l’utilisateur les a possédés, Donc si ces éléments ont changé depuis la dernière sauvegarde, ImageViewer.IsDirty May Restez fidèles. Utilisez le bouton Réinitialiser de la barre d’outils (ou mise à jour ImageViewer.Source) pour une annulation complète.
Nom: CommitAsync
Type: Task<CropResult>
Description: Fait cuire l’image actuellement affichée — y compris toute rotation et bascule — en PNG à la résolution source. Retourne nulle lorsque le le visualiseur est propre (rien à sauvegarder) ou avant que le pseudo JS ne soit attaché. Toute sélection de culture en cours qui n’a pas été engagée via le bouton Recadrer est intentionnellement ignoré ; cliquez sur Recadrer d’abord si Tu veux que ce soit bien intégré.
Nom: HandleFullscreenChange
Paramètres: bool isFullscreen
Type: Task
Description: Rappel de changement en plein écran au niveau du document — JS rapporte si le L’élément wrapper est actuellement l’élément plein écran du document. Sortie de l’envoi Passe aussi par ici (il ne passe pas par le bouton de la barre d’outils).
Nom: HandleKeyDown
Paramètres: string key
bool shiftKey
Type: Task
Description: Rappel keydown piloté par JS pour les raccourcis en mode édition. Que des incendies pour les clés que nous revendiquons (les filtres JS par état clé + modificateur), Nous n’avons donc pas besoin de bloquer cette méthode elle-même. Évasion — invoque ImageViewer.OnCancel (si elle est câblée). Enter — commit la sélection comme un recadrage s’il y en a un ≥ 5×5 ; Sinon, invoquez ImageViewer.OnSave s’il est sale. + / = / - / _ — zoom in/out. 0 — réinitialiser le zoom + panoramique vers l’identité. Supprimer / Retour arrière — effacer la sélection. Flèches — poussez la sélection de 1 px (10 px avec Maj).
Nom: HandleWheel
Paramètres: double deltaY
double cursorRelX
double cursorRelY
Type: Task
Description: Rappel en zoom sur roue — JS redirige chaque tick de défilement (deltaY) plus le Le curseur est décalé par rapport au centre du conteneur. Les calculs zoom ancrés suivent Réacte : pan_new = (1 − r) · curseurRel + r · pan_prev où r = zoom_new / zoom_prev. Garde le curseur au-dessus du même local-image Pointez à travers la marche de zoom.
Nom: ResetDirtyAsync
Type: Task
Description: Ça marque le visualiseur comme propre sans changer l’image affichée. Utilisation après un Sauvegarde réussie : Les octets recadrés sont désormais la version sauvegardée, donc Future Les changements doivent être mesurés par rapport à cet État. Pour revenir à l’affichage image à l’original ImageViewer.Source ET effacer la saleté, utilise la réinitialisation ou mettre à jour ImageViewer.Sourcela barre d’outils .
Nom: RevertCrop
Type: void
Description: Supprime uniquement la superposition locale des cultures — revient à l’original ImageViewer.Source. La rotation et les flips restent là où l’utilisateur les a possédés, Donc si ces éléments ont changé depuis la dernière sauvegarde, ImageViewer.IsDirty May Restez fidèles. Utilisez le bouton Réinitialiser de la barre d’outils (ou mise à jour ImageViewer.Source) pour une annulation complète.