Gerenciar Imagens em HTML com C#

API .NET para Gerenciamento de Imagens HTML

O Aspose.HTML for .NET fornece APIs de DOM e recursos para trabalhar com imagens referenciadas por documentos HTML. Um aplicativo C# pode criar ou atualizar um HTMLImageElement , localizar elementos de imagem com seletores CSS, removê-los do DOM, resolver os recursos referenciados e salvar o HTML modificado.

Escolher uma Operação com Imagens HTML

• Adicionar Imagens ao HTML . Crie um elemento <img>, defina a origem, o texto alternativo, as dimensões e os atributos modernos opcionais e insira-o na posição necessária do DOM.
• Extrair Imagens do HTML . Encontre referências de imagem, resolva URLs relativas com base no endereço base do documento e salve recursos locais, remotos ou incorporados compatíveis.
• Remover Imagens do HTML . Exclua os elementos <img> selecionados do DOM e diferencie a remoção da marcação da exclusão de arquivos físicos ou recursos de imagem de fundo CSS.
• Redimensionar Imagens no HTML . Defina dimensões intrínsecas e CSS responsivo para as imagens exibidas sem reamostrar o arquivo de origem referenciado.

Atualizar uma Imagem HTML Existente em C#

Este exemplo carrega um arquivo HTML, seleciona uma imagem existente pelo ID, altera o recurso referenciado e o texto alternativo, informa as dimensões intrínsecas e salva o documento atualizado. O arquivo de imagem deve permanecer disponível no caminho atribuído a Src.

using Aspose.Html;

// Load the source HTML file
using HTMLDocument document = new HTMLDocument("input.html");

// Select and update the existing image element
HTMLImageElement image =  document.QuerySelector("#product-image") as HTMLImageElement;

if (image != null)
{
    image.Src = "images/updated-product.webp";
    image.Alt = "Updated product shown from the front";
    image.SetAttribute("width", "960");
    image.SetAttribute("height", "640");
}

// Save the modified HTML document
document.Save("output.html");

Etapas Principais para Gerenciar Imagens em HTML

1. Carregue o arquivo de origem, URL, string ou stream com um construtor de HTMLDocument e forneça o endereço base correto quando for necessário resolver recursos relativos.
2. Localize uma imagem com QuerySelector() ou reúna várias correspondências com QuerySelectorAll() .
3. Crie, atualize, remova ou examine os elementos de imagem selecionados de acordo com a operação necessária.
4. Trate separadamente os recursos de imagem referenciados quando os arquivos precisarem ser copiados, baixados, incorporados, otimizados ou excluídos.
5. Chame Save() para gravar as alterações da marcação ou prossiga para uma conversão quando o HTML precisar ser renderizado em PDF ou formato de imagem.

Elementos, Origens e Recursos de Imagem HTML

• Atributos da imagem. Leia ou atualize src, alt, width, height, loading, decoding, srcset, sizes e outros atributos compatíveis com a marcação de destino.
• Posição no DOM. Adicione uma imagem ao corpo do documento ou a um contêiner selecionado, mova-a para outro elemento pai, substitua-a ou remova-a da árvore do documento.
• Localização dos recursos. Trabalhe com caminhos relativos, URLs HTTP ou HTTPS absolutas, URLs de arquivo e URIs de dados incorporados, considerando o endereço base do documento.
• Seleção de elementos. Use IDs, classes, seletores de atributo, seletores estruturais, XPath ou navegação no DOM para direcionar uma imagem ou uma coleção de imagens.
• Dimensões exibidas. Combine os valores intrínsecos de width e height com CSS para um layout fixo ou responsivo.
• Imagens fora de elementos img. Imagens de fundo CSS, conteúdo SVG, fontes de <picture>, favicons e entradas de imagem usam outros elementos ou regras de estilo e exigem uma lógica de seleção separada.
• APIs de saída. Envie o documento preparado para uma conversão quando a página renderizada completa precisar ser salva como PNG, JPEG, TIFF ou outro formato compatível.

Documentação de Imagens HTML e Referência da API

Consulte How to Add Image to HTML para ver exemplos de elementos <img>, dados incorporados e imagens de fundo CSS. A seção Working with HTML Documents explica como carregar, editar e salvar documentos e tratar recursos. A referência de HTMLImageElement descreve as propriedades das imagens e os métodos DOM herdados.

Instalar o Aspose.HTML for .NET

Instale o Aspose.HTML for .NET pelo NuGet usando a CLI do .NET:

dotnet add package Aspose.HTML

Você também pode usar a interface do Gerenciador de Pacotes NuGet ou executar Install-Package Aspose.HTML no Console do Gerenciador de Pacotes. Consulte o guia de instalação para configurar a biblioteca ou solicite uma licença temporária para avaliar a API sem limitações.

Perguntas Frequentes sobre Imagens HTML

1. O Aspose.HTML edita os pixels de arquivos PNG ou JPEG?

Não. As operações de gerenciamento de imagens atualizam elementos HTML, atributos, estilos e recursos referenciados. Reamostragem, recorte, compactação e edição em nível de pixel exigem uma etapa separada de processamento de imagens.

2. Como os caminhos relativos das imagens são resolvidos ao processar HTML?

Os valores relativos de src são resolvidos com base no endereço base do documento, normalmente determinado pelo local do arquivo ou da URL carregada. Quando o HTML é criado a partir de uma string ou stream, forneça uma URL base para resolver corretamente os caminhos relativos dos recursos.

3. Extrair imagens do HTML é o mesmo que converter HTML em imagem?

Não. A extração salva recursos referenciados por elementos ou estilos, como um JPEG usado por um elemento <img>. A conversão de HTML em imagem renderiza o layout completo da página em uma nova imagem rasterizada.