Gestionar imágenes en HTML con C#

API de gestión de imágenes HTML para .NET

Aspose.HTML for .NET proporciona API de DOM y recursos para trabajar con imágenes referenciadas por documentos HTML. Una aplicación C# puede crear o actualizar un HTMLImageElement , localizar elementos de imagen con selectores CSS, eliminarlos del DOM, resolver los recursos referenciados y guardar el HTML modificado.

Elegir un flujo de trabajo para imágenes HTML

• Agregar imágenes a HTML . Cree un elemento <img>, establezca su origen, texto alternativo, dimensiones y atributos modernos opcionales, e insértelo en la posición necesaria del DOM.
• Extraer imágenes de HTML . Encuentre referencias a imágenes, resuelva las URL relativas con la dirección base del documento y guarde los recursos locales, remotos o incrustados compatibles.
• Eliminar imágenes de HTML . Quite del DOM los elementos <img> seleccionados y distinga entre eliminar el marcado, los archivos físicos y los recursos de fondo CSS.
• Cambiar el tamaño de imágenes en HTML . Defina dimensiones intrínsecas y CSS adaptable para las imágenes mostradas sin modificar los datos del archivo de origen.

Actualizar una imagen HTML existente con C#

Este ejemplo carga un archivo HTML, selecciona una imagen existente por su ID, cambia el recurso referenciado y el texto alternativo, define las dimensiones intrínsecas y guarda el documento actualizado. El archivo de imagen debe seguir disponible en la ruta asignada 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");

Pasos principales para gestionar imágenes en HTML

1. Cargue el archivo, la URL, la cadena o el flujo de origen con un constructor de HTMLDocument y proporcione la dirección base correcta cuando sea necesario resolver recursos relativos.
2. Localice una imagen con QuerySelector() u obtenga varias coincidencias con QuerySelectorAll() .
3. Cree, actualice, elimine o inspeccione los elementos de imagen seleccionados según el flujo de trabajo necesario.
4. Procese por separado los recursos de imagen referenciados cuando sea necesario copiar, descargar, incrustar, optimizar o eliminar archivos.
5. Llame a Save() para escribir los cambios del marcado, o continúe con un flujo de conversión si el HTML debe renderizarse como PDF o formato de imagen.

Elementos, orígenes y recursos de imágenes HTML

• Atributos de imagen. Lea o actualice src, alt, width, height, loading, decoding, srcset, sizes y otros atributos admitidos por el marcado de destino.
• Posición en el DOM. Agregue una imagen al cuerpo del documento o a un contenedor seleccionado, muévala a otro elemento padre, reemplácela o elimínela del árbol del documento.
• Ubicación de recursos. Trabaje con rutas relativas, URL HTTP o HTTPS absolutas, URL de archivo y data URI incrustados teniendo en cuenta la dirección base del documento.
• Selección de elementos. Utilice ID, clases, selectores de atributos, selectores estructurales, XPath o navegación DOM para elegir una imagen o una colección.
• Dimensiones de visualización. Combine valores intrínsecos de width y height con CSS para diseños fijos o adaptables.
• Imágenes fuera de <img>. Las imágenes de fondo CSS, el contenido SVG, los orígenes de <picture>, los favicons y los elementos <input type="image"> utilizan otro marcado o reglas de estilo y requieren una lógica de selección propia.
• API de salida. Pase el documento preparado a un flujo de conversión cuando la página renderizada completa deba guardarse como PNG, JPEG, TIFF u otro formato compatible.

Documentación y referencia de API para imágenes HTML

La guía How to Add Image to HTML explica los elementos <img>, los datos incrustados y las imágenes de fondo CSS. Working with HTML Documents describe la carga, edición y guardado de documentos, además del tratamiento de recursos. Consulte HTMLImageElement para conocer sus propiedades y los métodos DOM heredados.

Instalar Aspose.HTML for .NET

Instale Aspose.HTML for .NET desde NuGet con la CLI de .NET:

dotnet add package Aspose.HTML

También puede usar la interfaz del Administrador de paquetes NuGet o ejecutar Install-Package Aspose.HTML en la consola del Administrador de paquetes. Consulte la guía de instalación para configurar la biblioteca o solicite una licencia temporal para evaluar la API sin limitaciones.

Preguntas frecuentes sobre imágenes HTML

1. ¿Aspose.HTML modifica los píxeles de los archivos PNG o JPEG?

No. Las operaciones de gestión de imágenes actualizan elementos HTML, atributos, estilos y referencias a recursos. El reescalado, recorte, compresión y edición a nivel de píxel requieren un paso independiente de procesamiento de imágenes.

2. ¿Cómo se resuelven las rutas relativas de imágenes al procesar HTML?

Los valores relativos de src se resuelven con respecto a la dirección base del documento, que normalmente procede de la ubicación del archivo o de la URL cargada. Al crear HTML desde una cadena o un flujo, proporcione una URL base si la aplicación debe resolver correctamente las rutas relativas.

3. ¿Extraer imágenes de HTML es lo mismo que convertir HTML en una imagen?

No. La extracción guarda los recursos referenciados por elementos o estilos, como el archivo JPEG utilizado por un elemento <img>. La conversión de HTML en imagen renderiza el diseño completo de la página en un nuevo archivo ráster.