Konvertieren Sie das Bild in Base64 online oder über C#

Bilder online kodieren

Über das URI-Schema

Daten-URI ist eine Methode zum Einbetten von Bildern und anderen Dateien in Webseiten als Textzeichenfolge basierend auf Base64-Codierung. Mit dem Daten-URI-Schema können Sie beliebige Binärdaten in HTML-, CSS-, JSON- oder SVG-Dokumente einfügen. Sie können beispielsweise Bilder in eine Webseite einbetten, als ob sie von einer externen Ressource geladen würden, aber anstatt die URL der Datei anzugeben, fügen Sie den Base64-codierten Inhalt des Bildes ein. Das Daten-URI-Schema wurde in RFC 2397 definiert und wird ab 2022 von den meisten gängigen Browsern vollständig unterstützt. Der Hauptvorteil der Verwendung von Daten-URIs ist eine Beschleunigung des Seitenladens, da der Browser keine zusätzliche Webanforderung stellen muss, um die Datei abzurufen, da das Bild bereits in das HTML-Dokument eingebettet ist.

Die Syntax des Daten-URI lautet wie folgt: data:[<mime type>][;charset=<charset>][;base64],<codierte Daten>.

Da die Größe von Base64-codierten Daten um 33 % zunimmt, wird empfohlen, Daten-URI nur für kleine Bilder zu verwenden. Große Base64-Bilder erzeugen viel Code im HTML, was zu einem Verlust an Leistungsvorteilen führt. Wenn Sie ein Bild in Base64 konvertieren und eine codierte Zeichenfolge zum Einbetten in eine Textdatei verwenden müssen, lernen Sie bitte zuerst alle Vor- und Nachteile kennen.

So konvertieren Sie Image in Base64 in C#

Um das Bild in eine Base64-Zeichenfolge zu konvertieren, verwenden wir die API Aspose.SVG for .NET, eine funktionsreiche, leistungsstarke und einfach zu verwendende API. Verwenden Sie die Dokumentbearbeitungs-API für die C#-Plattform. Wir betrachten das Beispiel einer PNG-Bild-zu-Base64-Codierung und Einbettung einer Base64-Zeichenfolge als Daten-URI in ein SVG-Dokument. Diese Operationen können mit ein paar Zeilen Code durchgeführt werden:

    // Open a binary file – raster image
    var bytes = File.ReadAllBytes(@"image.png");
    // Initialize an SVGDocument object
    var document = new SVGDocument();
    // Create an image element
    var img = (SVGImageElement)document.CreateElementNS("http://www.w3.org/2000/svg", "image");
    // Convert PNG image to Base64
    img.Href.BaseVal = "data:image/png;charset=utf-8;base64," + Convert.ToBase64String(bytes);
    // Add the image element into the SVG document
    document.RootElement.AppendChild(img);
    // Save the SVG document
    document.Save(@"image-base64.svg");

Schritte zum Konvertieren von Bildern in Base64 in C#

1. Öffnen Sie ein zu konvertierendes Bild. Verwenden Sie die ReadAllBytes(path)-Methode, um das PNG-Bild zu öffnen und den Inhalt der Datei in ein Byte-Array einzulesen.
2. Initialisieren Sie eine neue Instanz der Klasse SVGDocument.
3. Verwenden Sie die Methode CreateElementNS(namespaceURI,qualifiedName) der SVGDocument-Klasse, um eine zu erstellen Bildinstanz. Der namespaceURI setzt den Verweis auf die W3C-SVG-Spezifikation. Der qualifiedName muss den String-Tag-Namen des Bildelements enthalten.
4. Bild in Base64 konvertieren. Rufen Sie die ToBase64String(bytes)-Methode auf, um ein Array von 8-Bit-Ganzzahlen in die entsprechende Zeichenfolgendarstellung zu konvertieren, die in Base64-Ziffern codiert ist.
5. Fügen Sie das Bildelement mit der Methode AppendChild(node) zum SVG-Dokument hinzu.
6. Rufen Sie die Methode Save(path) auf, um das SVG-Dokument zu speichern.

Vor- und Nachteile von Daten-URI

Der Daten-URI bietet uns eine clevere Möglichkeit, Bilder auf einer Webseite einzubetten. URI-Schemata können auf viele Arten verwendet werden. Aber in jedem Fall gibt es Vor- und Nachteile.

Vorteile:

• Beschleunigung des Ladens von Seiten. Der Browser muss keine zusätzliche Webanforderung stellen, um die Datei abzurufen, da das Bild bereits in das HTML-Dokument eingebettet ist.
• Leistungsverbesserung. Der Browser benötigt weniger CPU-Zeit.
• Webseiten werden unabhängig von externen Dateien, sodass sie auch offline einfach geteilt werden können.

Nachteile:

• Die Größe der Base64-codierten Daten ist 1/3 größer als das Binärbild.
• Die verschlüsselten Bilder werden nicht vom Browser zwischengespeichert und bei jedem Besuch einer solchen Seite heruntergeladen.
• Codierte Bilder sind schwer zu bearbeiten, da die Base64-Zeichenfolge zuerst decodiert werden muss.
• Ein Base64-Bild wird niemals von Google indiziert, da es nicht in den Ergebnissen der Bildersuche erscheint.
  
  

Online-Base64-Encoder

Aspose.SVG bietet kostenlose Online-Anwendungen zum Kodieren und Dekodieren von Binärdaten:

• Base64-Encoder sind eine Reihe von Tools, mit denen Sie Binärdaten in verschiedenen Ausgabeformaten codieren können: Plain Base64, JSON, XML, URI oder CSS.
• Image Base64 Decoder konvertiert einen Daten-URI, der eine Base64-Zeichenfolge enthält, in ein Bild, indem eine URI-Zeichenfolge in das Eingabesteuerelement eingefügt wird.

Unsere browserbasierten Anwendungen funktionieren auf allen Plattformen, einschließlich Windows, Linux, Mac OS, Android und iOS. Für Sie ist keine Registrierung, Plugin- oder Softwareinstallation erforderlich. Beginnen Sie mit der sicheren, sicheren und einfachen Nutzung unserer Online-Base64-Codierungs-/Decodierungstools!

Anwendungsbeispiele für die Base64-Codierung

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..." alt="Red circle"/>
</svg>

<body>
    <div>
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..." alt="Red circle">
    </div>
</body>

.class {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg...');
}

<?xml version="1.0" encoding="UTF-8"?>
<root>
<image mime = "image/png">iVBORw0KGgoAAAANSUhEUgAAACAAAAAg...</image>
</root>

{
  "image": {
    "mime": "image/png",
    "data": "iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..."
  }
}

FAQ

Erste Schritte mit der Aspose.SVG for .NET API