Bilder in HTML mit C# verwalten

API zur Verwaltung von HTML-Bildern für .NET

Aspose.HTML for .NET bietet DOM- und Ressourcen-APIs für Bilder, auf die HTML-Dokumente verweisen. Eine C#-Anwendung kann ein HTMLImageElement erstellen oder aktualisieren, Bildelemente mit CSS-Selektoren finden, sie aus dem DOM entfernen, referenzierte Ressourcen auflösen und das geänderte HTML speichern.

Passenden Workflow für HTML-Bilder auswählen

• Bilder zu HTML hinzufügen . Erstellen Sie ein <img>-Element, legen Sie Quelle, Alternativtext, Abmessungen und optionale moderne Attribute fest und fügen Sie es an der gewünschten DOM-Position ein.
• Bilder aus HTML extrahieren . Ermitteln Sie Bildverweise, lösen Sie relative URLs anhand der Basisadresse des Dokuments auf und speichern Sie unterstützte lokale, externe oder eingebettete Ressourcen.
• Bilder aus HTML entfernen . Löschen Sie ausgewählte <img>-Elemente aus dem DOM und unterscheiden Sie dabei zwischen dem Entfernen von Markup, physischen Bilddateien und CSS-Hintergrundressourcen.
• Bildgrößen in HTML ändern . Legen Sie intrinsische Abmessungen und responsives CSS für dargestellte Bilder fest, ohne die Bilddaten der referenzierten Quelldatei zu verändern.

Vorhandenes HTML-Bild mit C# aktualisieren

Dieses Beispiel lädt eine HTML-Datei, wählt ein vorhandenes Bild anhand seiner ID aus, ändert die referenzierte Ressource und den Alternativtext, legt intrinsische Abmessungen fest und speichert das aktualisierte Dokument. Die Bilddatei muss unter dem in Src angegebenen Pfad verfügbar bleiben.

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");

Grundlegende Schritte zur Bildverwaltung in HTML

1. Laden Sie die Quelldatei, URL, Zeichenfolge oder den Stream mit einem HTMLDocument -Konstruktor und geben Sie die richtige Basisadresse an, wenn relative Ressourcen aufgelöst werden müssen.
2. Suchen Sie ein Bild mit QuerySelector() oder erfassen Sie mehrere Treffer mit QuerySelectorAll() .
3. Erstellen, aktualisieren, entfernen oder untersuchen Sie die ausgewählten Bildelemente entsprechend dem benötigten Workflow.
4. Verarbeiten Sie referenzierte Bildressourcen separat, wenn Dateien kopiert, heruntergeladen, eingebettet, optimiert oder gelöscht werden müssen.
5. Rufen Sie Save() auf, um Markup-Änderungen zu speichern, oder wechseln Sie zu einem Konvertierungsworkflow, wenn HTML als PDF oder Bild gerendert werden soll.

HTML-Bildelemente, Quellen und Ressourcen

• Bildattribute. Lesen oder aktualisieren Sie src, alt, width, height, loading, decoding, srcset, sizes und weitere Attribute des Ziel-Markups.
• Position im DOM. Fügen Sie ein Bild in den Dokumentkörper oder einen ausgewählten Container ein, verschieben Sie es zu einem anderen übergeordneten Element, ersetzen oder entfernen Sie es.
• Ressourcenadressen. Arbeiten Sie unter Berücksichtigung der Basisadresse des Dokuments mit relativen Pfaden, absoluten HTTP- oder HTTPS-URLs, Datei-URLs und eingebetteten data URIs.
• Elementauswahl. Verwenden Sie IDs, Klassen, Attribut- und Struktur-Selektoren, XPath oder DOM-Navigation, um ein Bild oder eine Sammlung auszuwählen.
• Darstellungsgröße. Kombinieren Sie intrinsische Werte für width und height mit CSS für ein festes oder responsives Layout.
• Bilder außerhalb von <img>. CSS-Hintergrundbilder, SVG-Inhalte, <picture>-Quellen, Favicons und <input type="image"> verwenden anderes Markup oder andere Stilregeln und erfordern eine eigene Auswahllogik.
• Ausgabe-APIs. Übergeben Sie das vorbereitete Dokument an einen Konvertierungsworkflow, wenn die vollständig gerenderte Seite als PNG, JPEG, TIFF oder in einem anderen unterstützten Format gespeichert werden soll.

Dokumentation und API-Referenz für HTML-Bilder

Der Leitfaden How to Add Image to HTML behandelt <img>-Elemente, eingebettete Daten und CSS-Hintergrundbilder. Working with HTML Documents erläutert das Laden, Bearbeiten und Speichern von Dokumenten sowie die Ressourcenverarbeitung. Eigenschaften und geerbte DOM-Methoden finden Sie in der Referenz zu HTMLImageElement .

Aspose.HTML for .NET installieren

Installieren Sie Aspose.HTML for .NET aus NuGet mit der .NET CLI:

dotnet add package Aspose.HTML

Alternativ können Sie die Benutzeroberfläche des NuGet-Paket-Managers verwenden oder Install-Package Aspose.HTML in der Paket-Manager-Konsole ausführen. Einzelheiten zur Einrichtung finden Sie in der Installationsanleitung . Mit einer temporären Lizenz können Sie die API ohne Einschränkungen der Evaluierung testen.

Häufige Fragen zur Verwaltung von HTML-Bildern

1. Bearbeitet Aspose.HTML die Pixel in PNG- oder JPEG-Dateien?

Nein. Die Bildverwaltung aktualisiert HTML-Elemente, Attribute, Stile und Ressourcenverweise. Für Neuskalierung, Zuschneiden, Komprimierung und Änderungen auf Pixelebene ist ein separater Bildverarbeitungsschritt erforderlich.

2. Wie werden relative Bildpfade bei der HTML-Verarbeitung aufgelöst?

Relative src-Werte werden anhand der Basisadresse des Dokuments aufgelöst, die normalerweise aus der geladenen Datei oder URL stammt. Bei HTML aus einer Zeichenfolge oder einem Stream muss eine Basis-URL angegeben werden, wenn relative Ressourcenpfade korrekt aufgelöst werden sollen.

3. Sind das Extrahieren von Bildern und die Konvertierung von HTML in ein Bild dasselbe?

Nein. Beim Extrahieren werden Ressourcen gespeichert, auf die Elemente oder Stile verweisen, beispielsweise die JPEG-Datei eines <img>-Elements. Bei der Konvertierung von HTML in ein Bild wird das vollständige Seitenlayout als neue Rasterdatei gerendert.