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.

Exemplo de reação

Exemplo de Blazor

React TypeScript

Razor

Framed + Downloadable

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

Exemplo de reação

Exemplo de Blazor

React TypeScript

Razor

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.

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.

React

Blazor

ImageViewer Classe

Parâmetros

Nome	Tipo	Padrão	Descrição
`Alt`	string?		Texto alternativo acessível. O padrão é `ImageViewer.FileName` se estiver desconfigurado.
`Croppable`	bool	False	Quando verdadeiro (e `ImageViewer.Toolbar` também é verdadeiro), permite interações com culturas: a barra de ferramentas ganha um seletor de proporção e um botão de Recorte; arrasto à esquerda no a imagem desenha um retângulo de seleção tracejado. Pressionar Recortar rasteriza a seleção para PNG e dispara `ImageViewer.OnCropApplied`; o visualizador então exibe o resultado recortado. O reset retorna ao original `ImageViewer.Source`. Configurar isso também adiciona crossorigin='anônimo' à <img> assim, o rasterizador pode ler os pixels de volta via ToBlob. Para ImageSource.Url ou seja, o servidor remoto deve enviar Acesso-Controle-Permitir Origem para que a imagem carregue; se for não faz isso, mude para ImageSource.Bytes (que resolve para a mesma origem data URL e não está sujeito a contaminação canvas).
`Downloadable`	bool	False	Quando verdade, expõe uma experiência de usuário para download: Com `ImageViewer.Toolbar`, adiciona um botão de download à barra de ferramentas. Com `ImageViewer.Framed` (sem barra de ferramenta), renderiza um botão de sobreposição no canto. Sem nenhum dos dois, a imagem em si clica para baixar.
`Fallback`	RenderFragment?		Renderizado quando `ImageViewer.Source` é nulo.
`FileName`	string?		Nome do arquivo usado ao baixar e como texto padrão `ImageViewer.Alt` . Volta à própria `ImageSource.FileName`imagem, que é outra ' imagem' da fonte.
`Framed`	bool	False	Quando for verdadeiro, envolve a imagem em um quadro com borda com token Fluente correspondente o estilo de pré-visualização somente leitura usado pelo ImageEdit. False padrão (imaginação nua).
`IsDirty`	bool	False	Estado sujo atual — verdadeiro quando a imagem exibida difere da Base (rotação, virada ou cultura aplicada). Estado puro de visão (zoom, panorama) Não alterna com o 'sujo' sozinho.
`OutputFormat`	ImageOutputFormat	Auto	Formato de saída para o resultado do corte rasterizado (e a imagem comprometida bytes de `ImageViewer.CommitAsync`). Padrão para `ImageOutputFormat.Auto` — o formato é derivado do extensão do arquivo source (entradas JPEG permanecem JPEG, todo o resto emite PNG). Pin para `ImageOutputFormat.Png` escritas sem perda independentemente da fonte, ou `ImageOutputFormat.Jpeg` para Fluxos fotográficos sensíveis ao tamanho.
`OutputQuality`	double	0,9	Qualidade JPEG em [0, 1]. Ignorado quando `ImageViewer.OutputFormat` é `ImageOutputFormat.Png` (PNG é sem perdas e não possui botão de qualidade). Padrão para 0,9 — visualmente indistinguível do original para a maioria das fotos, ainda assim economizando bastante em comparação com PNG.
`Source`	ImageSource?		Dados de imagem para renderizar. Quando nulo, `ImageViewer.Fallback` é renderizado em vez disso (ou nada se não houver reserva).
`Toolbar`	bool	False	Quando o verdadeiro é o resultado, renderiza uma barra de ferramentas acima da imagem com rotação / virar / ampliar / Resetar / controles em tela cheia. Implica um elemento de envolvimento independentemente de `ImageViewer.Framed`. O arrastar para panorama na imagem fica disponível quando Passou da 1×.

Nome: Alt

Tipo: string?

Descrição: Texto alternativo acessível. O padrão é ImageViewer.FileName se estiver desconfigurado.

Nome: Croppable

Tipo: bool

Padrão: False

Descrição: Quando verdadeiro (e ImageViewer.Toolbar também é verdadeiro), permite interações com culturas: a barra de ferramentas ganha um seletor de proporção e um botão de Recorte; arrasto à esquerda no a imagem desenha um retângulo de seleção tracejado. Pressionar Recortar rasteriza a seleção para PNG e dispara ImageViewer.OnCropApplied; o visualizador então exibe o resultado recortado. O reset retorna ao original ImageViewer.Source. Configurar isso também adiciona crossorigin='anônimo' à <img> assim, o rasterizador pode ler os pixels de volta via ToBlob. Para ImageSource.Url ou seja, o servidor remoto deve enviar Acesso-Controle-Permitir Origem para que a imagem carregue; se for não faz isso, mude para ImageSource.Bytes (que resolve para a mesma origem data URL e não está sujeito a contaminação canvas).

Nome: Downloadable

Tipo: bool

Padrão: False

Descrição: Quando verdade, expõe uma experiência de usuário para download: Com ImageViewer.Toolbar, adiciona um botão de download à barra de ferramentas. Com ImageViewer.Framed (sem barra de ferramenta), renderiza um botão de sobreposição no canto. Sem nenhum dos dois, a imagem em si clica para baixar.

Nome: Fallback

Tipo: RenderFragment?

Descrição: Renderizado quando ImageViewer.Source é nulo.

Nome: FileName

Tipo: string?

Descrição: Nome do arquivo usado ao baixar e como texto padrão ImageViewer.Alt . Volta à própria ImageSource.FileNameimagem, que é outra ' imagem' da fonte.

Nome: Framed

Tipo: bool

Padrão: False

Descrição: Quando for verdadeiro, envolve a imagem em um quadro com borda com token Fluente correspondente o estilo de pré-visualização somente leitura usado pelo ImageEdit. False padrão (imaginação nua).

Nome: IsDirty

Tipo: bool

Padrão: False

Descrição: Estado sujo atual — verdadeiro quando a imagem exibida difere da Base (rotação, virada ou cultura aplicada). Estado puro de visão (zoom, panorama) Não alterna com o 'sujo' sozinho.

Nome: OutputFormat

Tipo: ImageOutputFormat

Padrão: Auto

Descrição: Formato de saída para o resultado do corte rasterizado (e a imagem comprometida bytes de ImageViewer.CommitAsync). Padrão para ImageOutputFormat.Auto — o formato é derivado do extensão do arquivo source (entradas JPEG permanecem JPEG, todo o resto emite PNG). Pin para ImageOutputFormat.Png escritas sem perda independentemente da fonte, ou ImageOutputFormat.Jpeg para Fluxos fotográficos sensíveis ao tamanho.

Nome: OutputQuality

Tipo: double

Padrão: 0,9

Descrição: Qualidade JPEG em [0, 1]. Ignorado quando ImageViewer.OutputFormat é ImageOutputFormat.Png (PNG é sem perdas e não possui botão de qualidade). Padrão para 0,9 — visualmente indistinguível do original para a maioria das fotos, ainda assim economizando bastante em comparação com PNG.

Nome: Source

Tipo: ImageSource?

Descrição: Dados de imagem para renderizar. Quando nulo, ImageViewer.Fallback é renderizado em vez disso (ou nada se não houver reserva).

Nome: Toolbar

Tipo: bool

Padrão: False

Descrição: Quando o verdadeiro é o resultado, renderiza uma barra de ferramentas acima da imagem com rotação / virar / ampliar / Resetar / controles em tela cheia. Implica um elemento de envolvimento independentemente de ImageViewer.Framed. O arrastar para panorama na imagem fica disponível quando Passou da 1×.

Eventos

Nome	Tipo	Descrição
`OnCancel`	EventCallback	Quando definido junto com `ImageViewer.Toolbar`, torna um vermelho proibido- botão círculo na extremidade direita da barra de ferramentas. Sempre ativado. Os consumidores normalmente usam isso para sair do modo de edição e descartar em andamento transforma — o espectador não reverte nada automaticamente por si só; Remontar (por exemplo, via @key) ou atualizar `ImageViewer.Source` para Apague seu estado interno.
`OnClick`	EventCallback<MouseEventArgs>	Clique no manipulador no < >. Suprime o recurso de clicar para baixar.
`OnCropApplied`	EventCallback<CropResult>	Dispara quando o usuário faz um crop. Recebe a carga útil PNG rasterizada.
`OnDirtyChanged`	EventCallback<bool>	Dispara sempre que `ImageViewer.IsDirty` muda. Aciona o botão de salvar dos pais Ativado estado sem votação.
`OnSave`	EventCallback	Quando definido junto com `ImageViewer.Toolbar`, gera um marcador verde no extremo direito da barra de ferramentas. O botão é desativado enquanto O espectador é limpo — não há nada para salvar. O manipulador de cliques é um incêndio- e-esqueça; o consumidor normalmente liga `ImageViewer.CommitAsync` daqui para bakar a imagem exibida para bytes para persistência. Projetado para o fluxo de edição do ImageEdit (commit edits back na coluna encadernada). Consumidores independentes podem usá-lo da mesma forma.

Nome: OnCancel

Tipo: EventCallback

Descrição: Quando definido junto com ImageViewer.Toolbar, torna um vermelho proibido- botão círculo na extremidade direita da barra de ferramentas. Sempre ativado. Os consumidores normalmente usam isso para sair do modo de edição e descartar em andamento transforma — o espectador não reverte nada automaticamente por si só; Remontar (por exemplo, via @key) ou atualizar ImageViewer.Source para Apague seu estado interno.

Nome: OnClick

Tipo: EventCallback<MouseEventArgs>

Descrição: Clique no manipulador no < >. Suprime o recurso de clicar para baixar.

Nome: OnCropApplied

Tipo: EventCallback<CropResult>

Descrição: Dispara quando o usuário faz um crop. Recebe a carga útil PNG rasterizada.

Nome: OnDirtyChanged

Tipo: EventCallback<bool>

Descrição: Dispara sempre que ImageViewer.IsDirty muda. Aciona o botão de salvar dos pais Ativado estado sem votação.

Nome: OnSave

Tipo: EventCallback

Descrição: Quando definido junto com ImageViewer.Toolbar, gera um marcador verde no extremo direito da barra de ferramentas. O botão é desativado enquanto O espectador é limpo — não há nada para salvar. O manipulador de cliques é um incêndio- e-esqueça; o consumidor normalmente liga ImageViewer.CommitAsync daqui para bakar a imagem exibida para bytes para persistência. Projetado para o fluxo de edição do ImageEdit (commit edits back na coluna encadernada). Consumidores independentes podem usá-lo da mesma forma.

Métodos

Nome	Parâmetros	Tipo	Descrição
`CommitAsync`		Task<CropResult>	Baka a imagem exibida atualmente — incluindo qualquer rotação e inverte — para um PNG na resolução de origem. Retorna nulo quando o o visualizador está limpo (nada para salvar) ou antes do apelido JS anexado. Qualquer seleção de culturas em andamento que não tenha sido comprometida via o botão Recortar é intencionalmente ignorado; clique em Recortar primeiro se Você quer que seja assado.
`HandleFullscreenChange`	bool isFullscreen	Task	Callback de mudança em tela completa em nível de documento — JS reporta se o O elemento wrapper é atualmente o elemento em tela cheia do documento. Esculpir Passa por aqui também (não passa pelo botão da barra de ferramentas).
`HandleKeyDown`	string key bool shiftKey	Task	Retorno de chamada keydown movido por JS para os atalhos do modo edit. Só fogo para as chaves que reivindicamos (o JS shim filtra por estado chave + modificador), Então não precisamos bloquear esse método em si. Fuga — invocar `ImageViewer.OnCancel` (se estiver com fio). Enter — commit a seleção como um recorte, se houver um ≥ 5×5; Caso contrário, `ImageViewer.OnSave` invoque se estiver sujo. + / = / / /_ — dá zoom in / out. 0 — redefinir zoom + panorâmica para identidade. Delete / Backspace — limpar a seleção. Teclas de seta — empurre a seleção 1 px (10 px com Shift).
`HandleWheel`	double deltaY double cursorRelX double cursorRelY	Task	Callback com zoom na roda — JS encaminha cada tick de rolagem (deltaY) mais o O cursor está deslocado do centro do contêiner. A matemática de zoom ancorada segue React: pan_new = (1 − r) · cursorRel + r · pan_prev onde r = zoom_new / zoom_prev. Mantém o cursor sobre o mesmo local-imagem Aponte para o degrau do zoom.
`ResetDirtyAsync`		Task	Marca o visualizador como limpo sem alterar a imagem exibida. Uso após um Salvamento bem-sucedido: Os bytes cortados agora são a versão salva, então futuro As mudanças devem ser medidas com base nesse estado. Para reverter o display imagem para o original `ImageViewer.Source` E limpar sujo, use o Reset ou atualizar `ImageViewer.Source`.
`RevertCrop`		void	Remove apenas a sobreposição local de culturas — volta ao original `ImageViewer.Source`. Rotação e flips ficam onde o usuário tem, Então, se esses mudaram desde o último save, `ImageViewer.IsDirty` pode Permaneça fiel. Use o botão Reset da barra de ferramentas (ou atualização `ImageViewer.Source`) para uma reversão completa.

Nome: CommitAsync

Tipo: Task<CropResult>

Descrição: Baka a imagem exibida atualmente — incluindo qualquer rotação e inverte — para um PNG na resolução de origem. Retorna nulo quando o o visualizador está limpo (nada para salvar) ou antes do apelido JS anexado. Qualquer seleção de culturas em andamento que não tenha sido comprometida via o botão Recortar é intencionalmente ignorado; clique em Recortar primeiro se Você quer que seja assado.

Nome: HandleFullscreenChange

Parâmetros: bool isFullscreen

Tipo: Task

Descrição: Callback de mudança em tela completa em nível de documento — JS reporta se o O elemento wrapper é atualmente o elemento em tela cheia do documento. Esculpir Passa por aqui também (não passa pelo botão da barra de ferramentas).

Nome: HandleKeyDown

Parâmetros: string key
bool shiftKey

Tipo: Task

Descrição: Retorno de chamada keydown movido por JS para os atalhos do modo edit. Só fogo para as chaves que reivindicamos (o JS shim filtra por estado chave + modificador), Então não precisamos bloquear esse método em si. Fuga — invocar ImageViewer.OnCancel (se estiver com fio). Enter — commit a seleção como um recorte, se houver um ≥ 5×5; Caso contrário, ImageViewer.OnSave invoque se estiver sujo. + / = / / /_ — dá zoom in / out. 0 — redefinir zoom + panorâmica para identidade. Delete / Backspace — limpar a seleção. Teclas de seta — empurre a seleção 1 px (10 px com Shift).

Nome: HandleWheel

Parâmetros: double deltaY
double cursorRelX
double cursorRelY

Tipo: Task

Descrição: Callback com zoom na roda — JS encaminha cada tick de rolagem (deltaY) mais o O cursor está deslocado do centro do contêiner. A matemática de zoom ancorada segue React: pan_new = (1 − r) · cursorRel + r · pan_prev onde r = zoom_new / zoom_prev. Mantém o cursor sobre o mesmo local-imagem Aponte para o degrau do zoom.

Nome: ResetDirtyAsync

Tipo: Task

Descrição: Marca o visualizador como limpo sem alterar a imagem exibida. Uso após um Salvamento bem-sucedido: Os bytes cortados agora são a versão salva, então futuro As mudanças devem ser medidas com base nesse estado. Para reverter o display imagem para o original ImageViewer.Source E limpar sujo, use o Reset ou atualizar ImageViewer.Source.

Nome: RevertCrop

Tipo: void

Descrição: Remove apenas a sobreposição local de culturas — volta ao original ImageViewer.Source. Rotação e flips ficam onde o usuário tem, Então, se esses mudaram desde o último save, ImageViewer.IsDirty pode Permaneça fiel. Use o botão Reset da barra de ferramentas (ou atualização ImageViewer.Source) para uma reversão completa.

ImageViewer

Bare

Framed + Downloadable

Toolbar

Toolbar + Croppable

ImageViewer Classe

Parâmetros

Eventos

Métodos