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.

Ejemplo de reacción
Ejemplo 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.

Ejemplo de reacción
Ejemplo 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.

Ejemplo de reacción
Ejemplo 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.

Ejemplo de reacción
Ejemplo de Blazor
placeholder.png
React TypeScript
Razor
Reaccionar Blazor

ImageViewer Clase

Parámetros

Nombre
Tipo
Default
Descripción
Altstring?
Texto alternativo accesible. Por defecto se ImageViewer.FileName aplica si no está activado.
Croppablebool
False
Cuando es cierto (y ImageViewer.Toolbar también es cierto), permite interacciones de cultivos: la barra de herramientas tiene un selector de relación de aspecto y un botón de Recorte; arrastre a la izquierda en el La imagen dibuja un rectángulo de selección discontinuo. Pulsar Recorte rasteriza la selección a PNG y dispara ImageViewer.OnCropApplied; el visor entonces muestra el resultado recortado. El reinicio vuelve al valor original ImageViewer.Source. Configurar esto también añade crossorigin='anonymous' a la <img> así que el rasterizador puede leer los píxeles de vuelta a través de toBlob. Para ImageSource.Url significa que el servidor remoto debe enviar Access-Control-Allow-Origin para que la imagen cargue en absoluto; si es no lo hace, cambia a ImageSource.Bytes (que resuelve a un mismo origen y no está sujeto a contaminación de canvas).
Downloadablebool
False
Cuando es cierto, expone una experiencia de usuario descargada: Con ImageViewer.Toolbar, añade un botón de descarga a la barra de herramientas. Con ImageViewer.Framed (sin barra de herramientas), se muestra un botón de superposición en la esquina. Sin ninguno de los dos, la imagen en sí es un clic para descargar.
FallbackRenderFragment?
Se renderiza cuando ImageViewer.Source es nulo.
FileNamestring?
Nombre del archivo usado al descargar y como texto por defectoImageViewer.Alt. Vuelve a la propia ImageSource.FileNameimagen, que por lo demás es 'imagen'.
Framedbool
False
Cuando es cierto, envuelve la imagen en un marco bordeado con Fluent-token, que coincide el estilo de vista previa de solo lectura que utiliza ImageEdit. Falso por defecto (imaginación sin filtro).
IsDirtybool
False
Estado sucio actual — cierto cuando la imagen mostrada difiere de la línea base (rotación, volteo o cultivo aplicado). Estado puro de vista (zoom, paneo) No cambia de suciedad por sí sola.
OutputFormatImageOutputFormat
Auto
Formato de salida para el resultado del recorte rasterizado (y la imagen comprometida bytes de ImageViewer.CommitAsync). Valores predeterminados de ImageOutputFormat.Auto — el formato deriva de la extensión del archivo fuente (las entradas JPEG permanecen en JPEG, todo lo demás emite PNG). Pin a ImageOutputFormat.Png para escrituras sin pérdidas independientemente de la fuente, o ImageOutputFormat.Jpeg para Flujos fotográficos sensibles al tamaño.
OutputQualitydouble
0,9
Calidad JPEG en [0, 1]. Ignorado cuando ImageViewer.OutputFormat es ImageOutputFormat.Png (PNG es sin pérdida y no tiene mando de calidad). Por defecto es 0.9 — visualmente indistinguible del original para la mayoría de las fotos, aunque aún así se guarda mucho frente a PNG.
SourceImageSource?
Datos de imagen para renderizar. Cuando es nulo, ImageViewer.Fallback se renderiza en su lugar (o nada si no se suministra respaldo).
Toolbarbool
False
Cuando es cierto, renderiza una barra de herramientas sobre la imagen con rotar / voltear / ampliar / Reinicio / controles a pantalla completa. Implica un elemento envoltorio independientemente de ImageViewer.Framed. El arrastre para panear en la imagen queda disponible cuando Pasé la 1× a toda velocidad.
Nombre: Alt
Tipo: string?
Descripción: Texto alternativo accesible. Por defecto se ImageViewer.FileName aplica si no está activado.
Nombre: Croppable
Tipo: bool
Default: False
Descripción: Cuando es cierto (y ImageViewer.Toolbar también es cierto), permite interacciones de cultivos: la barra de herramientas tiene un selector de relación de aspecto y un botón de Recorte; arrastre a la izquierda en el La imagen dibuja un rectángulo de selección discontinuo. Pulsar Recorte rasteriza la selección a PNG y dispara ImageViewer.OnCropApplied; el visor entonces muestra el resultado recortado. El reinicio vuelve al valor original ImageViewer.Source. Configurar esto también añade crossorigin='anonymous' a la <img> así que el rasterizador puede leer los píxeles de vuelta a través de toBlob. Para ImageSource.Url significa que el servidor remoto debe enviar Access-Control-Allow-Origin para que la imagen cargue en absoluto; si es no lo hace, cambia a ImageSource.Bytes (que resuelve a un mismo origen y no está sujeto a contaminación de canvas).
Nombre: Downloadable
Tipo: bool
Default: False
Descripción: Cuando es cierto, expone una experiencia de usuario descargada: Con ImageViewer.Toolbar, añade un botón de descarga a la barra de herramientas. Con ImageViewer.Framed (sin barra de herramientas), se muestra un botón de superposición en la esquina. Sin ninguno de los dos, la imagen en sí es un clic para descargar.
Nombre: Fallback
Tipo: RenderFragment?
Descripción: Se renderiza cuando ImageViewer.Source es nulo.
Nombre: FileName
Tipo: string?
Descripción: Nombre del archivo usado al descargar y como texto por defectoImageViewer.Alt. Vuelve a la propia ImageSource.FileNameimagen, que por lo demás es 'imagen'.
Nombre: Framed
Tipo: bool
Default: False
Descripción: Cuando es cierto, envuelve la imagen en un marco bordeado con Fluent-token, que coincide el estilo de vista previa de solo lectura que utiliza ImageEdit. Falso por defecto (imaginación sin filtro).
Nombre: IsDirty
Tipo: bool
Default: False
Descripción: Estado sucio actual — cierto cuando la imagen mostrada difiere de la línea base (rotación, volteo o cultivo aplicado). Estado puro de vista (zoom, paneo) No cambia de suciedad por sí sola.
Nombre: OutputFormat
Tipo: ImageOutputFormat
Default: Auto
Descripción: Formato de salida para el resultado del recorte rasterizado (y la imagen comprometida bytes de ImageViewer.CommitAsync). Valores predeterminados de ImageOutputFormat.Auto — el formato deriva de la extensión del archivo fuente (las entradas JPEG permanecen en JPEG, todo lo demás emite PNG). Pin a ImageOutputFormat.Png para escrituras sin pérdidas independientemente de la fuente, o ImageOutputFormat.Jpeg para Flujos fotográficos sensibles al tamaño.
Nombre: OutputQuality
Tipo: double
Default: 0,9
Descripción: Calidad JPEG en [0, 1]. Ignorado cuando ImageViewer.OutputFormat es ImageOutputFormat.Png (PNG es sin pérdida y no tiene mando de calidad). Por defecto es 0.9 — visualmente indistinguible del original para la mayoría de las fotos, aunque aún así se guarda mucho frente a PNG.
Nombre: Source
Tipo: ImageSource?
Descripción: Datos de imagen para renderizar. Cuando es nulo, ImageViewer.Fallback se renderiza en su lugar (o nada si no se suministra respaldo).
Nombre: Toolbar
Tipo: bool
Default: False
Descripción: Cuando es cierto, renderiza una barra de herramientas sobre la imagen con rotar / voltear / ampliar / Reinicio / controles a pantalla completa. Implica un elemento envoltorio independientemente de ImageViewer.Framed. El arrastre para panear en la imagen queda disponible cuando Pasé la 1× a toda velocidad.

Eventos

Nombre
Tipo
Descripción
OnCancelEventCallback
Cuando se establece junto con ImageViewer.Toolbar, hace que un rojo quede prohibido- botón circular en el extremo derecho de la barra de herramientas. Siempre activado. Los consumidores suelen usar esto para salir del modo de edición y descartar en proceso transformaciones — El espectador no revierte nada automáticamente; Volver a montarlo (por ejemplo, mediante @key) o actualizar ImageViewer.Source a Borra su estado interno.
OnClickEventCallback<MouseEventArgs>
Haz clic en el manejador en la <img>. Suprime el recurso de hacer clic para descargar.
OnCropAppliedEventCallback<CropResult>
Se dispara cuando el usuario realiza un recorte. Recibe la carga útil PNG rasterizada.
OnDirtyChangedEventCallback<bool>
Se dispara cada vez ImageViewer.IsDirty que cambia. Acciona el botón de guardado de un padre Estado habilitado sin sondeo.
OnSaveEventCallback
Cuando se configura junto con ImageViewer.Toolbar, se muestra una marca de verificación verde en el extremo derecho de la barra de herramientas. El botón está desactivado mientras El espectador está limpio — no hay nada que salvar. El manejador de clics es fuego- y-olvidar; el consumidor suele llamar ImageViewer.CommitAsync desde aquí para hornear la imagen mostrada a bytes para persistencia. Diseñado para el flujo de edición ImageEdit (commit edits back en la columna encuadernado). Los consumidores independientes pueden usarlo de la misma manera.
Nombre: OnCancel
Tipo: EventCallback
Descripción: Cuando se establece junto con ImageViewer.Toolbar, hace que un rojo quede prohibido- botón circular en el extremo derecho de la barra de herramientas. Siempre activado. Los consumidores suelen usar esto para salir del modo de edición y descartar en proceso transformaciones — El espectador no revierte nada automáticamente; Volver a montarlo (por ejemplo, mediante @key) o actualizar ImageViewer.Source a Borra su estado interno.
Nombre: OnClick
Tipo: EventCallback<MouseEventArgs>
Descripción: Haz clic en el manejador en la <img>. Suprime el recurso de hacer clic para descargar.
Nombre: OnCropApplied
Tipo: EventCallback<CropResult>
Descripción: Se dispara cuando el usuario realiza un recorte. Recibe la carga útil PNG rasterizada.
Nombre: OnDirtyChanged
Tipo: EventCallback<bool>
Descripción: Se dispara cada vez ImageViewer.IsDirty que cambia. Acciona el botón de guardado de un padre Estado habilitado sin sondeo.
Nombre: OnSave
Tipo: EventCallback
Descripción: Cuando se configura junto con ImageViewer.Toolbar, se muestra una marca de verificación verde en el extremo derecho de la barra de herramientas. El botón está desactivado mientras El espectador está limpio — no hay nada que salvar. El manejador de clics es fuego- y-olvidar; el consumidor suele llamar ImageViewer.CommitAsync desde aquí para hornear la imagen mostrada a bytes para persistencia. Diseñado para el flujo de edición ImageEdit (commit edits back en la columna encuadernado). Los consumidores independientes pueden usarlo de la misma manera.

Métodos

Nombre
Parámetros
Tipo
Descripción
CommitAsyncTask<CropResult>
Hornea la imagen que se muestra actualmente — incluyendo cualquier rotación y se convierte en un PNG en resolución de origen. Devuelve nulo cuando el el visor está limpio (nada que guardar) o antes que el usuario JS adjunto. Cualquier selección de cultivo en progreso que no haya sido comprometida mediante el botón Recorte se ignora intencionadamente; haz clic en recortar primero si Quieres que esté horneado.
HandleFullscreenChangebool isFullscreen
Task
Callback de cambio de pantalla completa a nivel de documento — JS informa si el El elemento envoltorio es actualmente el elemento a pantalla completa del documento. Salida también fluye por aquí (no pasa por el botón de la barra de herramientas).
HandleKeyDownstring key
bool shiftKey
Task
Referencia de keydown basada en JS para los atajos en modo edición. Solo fuegos para las claves que reclamamos (la cuña JS filtra por estado clave + modificador), Así que no tenemos que bloquear este método en sí. Escape — invocar ImageViewer.OnCancel (si está cableado). Enter — commit la selección como un recorte si hay uno ≥ 5×5; Si no, ImageViewer.OnSave invoca si está sucio. + / = / / / _ — Haz zoom / aleja. 0 — restablecer zoom + paneo a identidad. Borrar / Retroceso — borrar la selección. Teclas de flecha — empuja la selección 1 px (10 px con Mayús).
HandleWheeldouble deltaY
double cursorRelX
double cursorRelY
Task
Callback con zoom en rueda — JS reenvía cada tick de desplazamiento (deltaY) más el El cursor está desplazado respecto al centro del contenedor. A continuación se analiza matemáticas ancladas por zoom React: pan_new = (1 − r) · cursorRel + r · pan_prev dónde r = zoom_new / zoom_prev. Mantiene el cursor sobre la misma imagen local Señala a través del escalón de zoom.
ResetDirtyAsyncTask
Marca el visor como limpio sin cambiar la imagen mostrada. Uso después de un Guardado exitoso: Los bytes recortados ahora son la versión guardada, así que Future Los cambios deben medirse en función de este estado. Para revertir la visualización imagen al original ImageViewer.Source Y limpiar sucio, usa el botón Reiniciar botón de barra de herramientas o actualizar ImageViewer.Source.
RevertCropvoid
Elimina solo la superposición local de cultivos — vuelve al original ImageViewer.Source. La rotación y los flips se quedan donde los tiene el usuario, Así que si esos cambios cambiaron desde la última partida, ImageViewer.IsDirty puede Mantente fiel. Usa el botón Reiniciar de la barra de herramientas (o actualizando ImageViewer.Source) para una reversión completa.
Nombre: CommitAsync
Tipo: Task<CropResult>
Descripción: Hornea la imagen que se muestra actualmente — incluyendo cualquier rotación y se convierte en un PNG en resolución de origen. Devuelve nulo cuando el el visor está limpio (nada que guardar) o antes que el usuario JS adjunto. Cualquier selección de cultivo en progreso que no haya sido comprometida mediante el botón Recorte se ignora intencionadamente; haz clic en recortar primero si Quieres que esté horneado.
Nombre: HandleFullscreenChange
Parámetros: bool isFullscreen
Tipo: Task
Descripción: Callback de cambio de pantalla completa a nivel de documento — JS informa si el El elemento envoltorio es actualmente el elemento a pantalla completa del documento. Salida también fluye por aquí (no pasa por el botón de la barra de herramientas).
Nombre: HandleKeyDown
Parámetros: string key
bool shiftKey
Tipo: Task
Descripción: Referencia de keydown basada en JS para los atajos en modo edición. Solo fuegos para las claves que reclamamos (la cuña JS filtra por estado clave + modificador), Así que no tenemos que bloquear este método en sí. Escape — invocar ImageViewer.OnCancel (si está cableado). Enter — commit la selección como un recorte si hay uno ≥ 5×5; Si no, ImageViewer.OnSave invoca si está sucio. + / = / / / _ — Haz zoom / aleja. 0 — restablecer zoom + paneo a identidad. Borrar / Retroceso — borrar la selección. Teclas de flecha — empuja la selección 1 px (10 px con Mayús).
Nombre: HandleWheel
Parámetros: double deltaY
double cursorRelX
double cursorRelY
Tipo: Task
Descripción: Callback con zoom en rueda — JS reenvía cada tick de desplazamiento (deltaY) más el El cursor está desplazado respecto al centro del contenedor. A continuación se analiza matemáticas ancladas por zoom React: pan_new = (1 − r) · cursorRel + r · pan_prev dónde r = zoom_new / zoom_prev. Mantiene el cursor sobre la misma imagen local Señala a través del escalón de zoom.
Nombre: ResetDirtyAsync
Tipo: Task
Descripción: Marca el visor como limpio sin cambiar la imagen mostrada. Uso después de un Guardado exitoso: Los bytes recortados ahora son la versión guardada, así que Future Los cambios deben medirse en función de este estado. Para revertir la visualización imagen al original ImageViewer.Source Y limpiar sucio, usa el botón Reiniciar botón de barra de herramientas o actualizar ImageViewer.Source.
Nombre: RevertCrop
Tipo: void
Descripción: Elimina solo la superposición local de cultivos — vuelve al original ImageViewer.Source. La rotación y los flips se quedan donde los tiene el usuario, Así que si esos cambios cambiaron desde la última partida, ImageViewer.IsDirty puede Mantente fiel. Usa el botón Reiniciar de la barra de herramientas (o actualizando ImageViewer.Source) para una reversión completa.