Encoder l’image en Base64 en ligne ou en C#

Convertir l’image en chaîne encodée Base64. JPG, JPEG, PJP, PJPEG, PNG, BMP, XBM, GIF, TIFF, ICO, IFIF, WEBP et d’autres formats d’image sont pris en charge.

Encodage Base64

Base64 est un groupe de schémas de codage similaires pour convertir des données binaires en un format texte ASCII. Base64 est généralement utilisé pour transférer des données sur Internet. Le résultat de la conversion d’une image en Base64 n’est qu’un ensemble de lettres latines, de chiffres et de deux caractères - “+” et “/”. N’importe quel navigateur sait quoi en faire. En d’autres termes, Base64 est une sorte d’encodage binaire-texte. La chaîne encodée en Base64 est utilisée dans divers formats de sortie : Base64 simple, JSON, XML, URI de données ou CSS.

Base64 est particulièrement courant sur le Web, où son utilisation inclut la possibilité d’intégrer des fichiers image ou d’autres ressources binaires dans des ressources texte telles que des fichiers HTML et CSS. L’inclusion des données d’image dans le fichier HTML signifie que le navigateur n’a pas besoin de faire une requête Web supplémentaire pour récupérer le fichier car l’image est déjà intégrée dans le document HTML. Il est recommandé d’utiliser l’encodage Base64 uniquement pour les petites images. Les images Base64 volumineuses génèrent beaucoup de code en HTML, ce qui entraîne une perte de performances. Il convient également de noter qu’une image Base64 ne sera jamais indexée par Google car elle n’apparaît pas dans les recherches d’images.

Convertir une image en Base64 en ligne

Encodez des images avec l’API Aspose.SVG pour .NET en temps réel ! Veuillez charger une image à partir du système de fichiers local et vous obtiendrez immédiatement le résultat sous forme d’URI de données, de source d’image Base64 et de source d’arrière-plan CSS Base64. SVG, JPG, JPEG, PJP, PJPEG, PNG, BMP, XBM, GIF, TIFF, ICO, IFIF, WEBP et d’autres formats d’image sont pris en charge.

Convertir une image en Base64 en C#

Cet article explique comment encoder un fichier image dans une chaîne Base64 à l'aide des fonctionnalités de l'API Aspose.SVG pour .NET. L'exemple C# suivant montre comment convertir une image PNG en une chaîne Base64 et l'incorporer dans un fichier SVG. La méthode ReadAllBytes(string) est utilisée pour ouvrir une image (fichier binaire) et lire le contenu du fichier dans un tableau d'octets. La méthode ToBase64String(bytes) convertit un tableau d'entiers 8 bits en sa représentation sous forme de chaîne équivalente codée en chiffres de base 64. La méthode AppendChild() ajoute ensuite l'image encodée en Base64 au document SVG.

Code C# pour convertir une image PNG en Base64

    // Open a binary file - PNG 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 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");

Le fragment du fichier image-base64.svg résultant est illustré ci-dessous. La chaîne Base64 a été coupée pour ne pas encombrer l'exemple de code SVG. Le format pour intégrer l'image Base64 en tant que données URI est le suivant, pour être précis :

data :[<type mime>][;charset=<charset>][;base64],<données codées>

Code SVG pour intégrer l'image Base64

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

Intégrer une image Base64 dans HTML


Pourquoi auriez-vous besoin de convertir Image en Base64 ? Les images encodées en Base64 peuvent être intégrées dans HTML à l’aide de la balise <img>. Collez simplement les données d’image directement dans le fichier HTML en utilisant l’URI de données. L’encodage Base64 et l’utilisation du schéma d’URI de données réduisent le nombre de requêtes HTTP dont un navigateur a besoin pour afficher une page Web. Cet extrait de code montre comment vous pouvez intégrer des images Base64 dans HTML.

Code HTML pour intégrer l'image Base64 en tant qu'URI de données

<body>
    <div>
        <img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUg..." alt="Red border">
    </div>
</body>

L’URI de données se compose de deux parties séparées par une virgule. La première partie spécifie une image encodée en Base64 et la deuxième partie spécifie une chaîne d’image encodée en Base64 :

  1. data:image/jpeg;base64, est l’en-tête du schéma d’URI de données.
  2. iVBORw0KGgoAAAANSUhEUg... correspond aux données encodées en Base64.

Exemple d'intégration d'une image Base64 en tant que code d'arrière-plan CSS


Une autre façon de réduire le nombre de requêtes HTTP pour les images est l’utilisation de la propriété CSS background-image. La propriété background-image définit les images comme arrière-plan d’un élément. Chaque image de la propriété background-image peut être spécifiée en tant qu’URL ou en tant qu’URI de données d’image. La différence est que dans le premier cas, le navigateur envoie une requête HTTP pour obtenir l’image externe, tandis que dans le second cas, l’image Base64 est directement intégrée dans le document et ne signale pas d’autres sources. Par conséquent, le navigateur n’a pas besoin de charger des requêtes HTTP pour fournir la sortie.

Code CSS pour intégrer l'image Base64 en tant qu'URI de données

body {
    background-image: url('data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUg...');
}

Encodeurs Base64 en ligne

Les Encodeurs Base64 en ligne convertissent le contenu de documents SVG ou de fichiers image en sa représentation sous forme de chaîne équivalente encodée avec des chiffres en base 64. Ils fournissent également des exemples pour les données URI, JSON, XML et autres. Les outils d’encodage vous aident à éviter divers problèmes d’encodage des données qui rendent le contenu du site Web ou les messages électroniques illisibles. Les encodeurs Base64 sont sécurisés, faciles à utiliser et entièrement gratuits. Ils fonctionnent dans n’importe quel navigateur et sur n’importe quel système d’exploitation. Convertissez l’image en Base64 gratuitement dès maintenant !

Installation d'Aspose.SVG pour la bibliothèque .NET

Aspose.SVG pour .NET est une bibliothèque flexible multiplateforme conçue pour fournir un large éventail de fonctionnalités pour le traitement et le rendu de documents SVG. Il s’intègre parfaitement à vos applications .NET pour travailler avec des fichiers SVG sans installer de logiciel tiers. Notre API SVG .NET peut être utilisée avec n’importe quel langage .NET, tel que C#, VB.NET, ASP.NET, etc. cœur. Cela inclut Windows, Linux et macOS.

Installation de Aspose.SVG pour .NET via NuGet  :

  1. Utilisation de la console du gestionnaire de packages.
  2. Utilisation de l’interface graphique du gestionnaire de packages NuGet.

Pour plus de détails sur l’installation de la bibliothèque C#, veuillez vous référer à Documentation Aspose.SVG.

Autres encodeurs pris en charge

Vous pouvez encoder l’image en Base64 - les formats JPG, PNG, BMP, GIF, TIFF, ICO et SVG sont pris en charge: