Convertir une image en Base64 en ligne ou en C#

Encoder des images en ligne

À propos du schéma d'URI

L’URI de données est une méthode d’intégration d’images et d’autres fichiers dans des pages Web sous forme de chaîne de texte basée sur l’encodage Base64. Le schéma d’URI de données vous permet d’inclure toutes les données binaires dans les documents HTML, CSS, JSON ou SVG. Par exemple, vous pouvez incorporer des images dans une page Web comme si elles avaient été chargées à partir d’une ressource externe, mais au lieu de spécifier l’URL du fichier, vous insérez le contenu encodé en Base64 de l’image. Le schéma d’URI de données a été défini dans la RFC 2397 et, à partir de 2022, il est entièrement pris en charge par la plupart des principaux navigateurs. Le principal avantage de l’utilisation de l’URI de données est une accélération du chargement de la page car le navigateur n’a pas besoin de faire une requête Web supplémentaire pour récupérer le fichier puisque l’image est déjà intégrée dans le document HTML.

La syntaxe de l’URI de données est la suivante: data:[<type mime>][;charset=<charset>][;base64],<données codées>.

Étant donné que la taille des données encodées en Base64 augmente de 33 %, il est recommandé d’utiliser l’URI de données uniquement pour les petites images. Les grandes images Base64 produisent beaucoup de code dans le HTML, ce qui entraîne une perte de performances. Si vous avez besoin de convertir Image en Base64 et d’utiliser une chaîne codée pour l’intégrer dans un fichier texte, veuillez d’abord connaître tous les avantages et inconvénients.

Comment convertir une image en Base64 en C#

Afin de convertir Image en chaîne Base64, nous utilisons l’API Aspose.SVG pour .NET , qui est une API de manipulation de documents riche en fonctionnalités, puissante et facile à utiliser pour la plate-forme C#. Nous considérons l’exemple de l’encodage PNG Image vers Base64 et de l’intégration de la chaîne Base64 en tant qu’URI de données dans un document SVG. Ces opérations peuvent être effectuées avec quelques lignes de code:

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

Étapes pour convertir une image en Base64 en C#

1. Ouvrez une image à convertir. Utilisez la méthode ReadAllBytes(path) pour ouvrir l’image PNG et lire le contenu du fichier dans un tableau d’octets.
2. Initialisez une nouvelle instance de la classe SVGDocument .
3. Utilisez la méthode CreateElementNS(namespaceURI, qualifiedName) de la classe SVGDocument pour créer une instance d’image. Le namespaceURI définit la référence à la spécification W3C SVG. Le qualifiedName doit contenir le nom de balise de chaîne de l’élément image.
4. Convertir l’image en Base64. Appelez la méthode ToBase64String(bytes) pour convertir un tableau d’entiers 8 bits en sa représentation sous forme de chaîne équivalente codée en chiffres base64.
5. Ajoutez l’élément image dans le document SVG à l’aide de la méthode AppendChild(node) .
6. Appelez la méthode Save(path) pour enregistrer le document SVG.

Avantages et inconvénients de l'URI de données

L’URI de données nous donne un moyen judicieux d’intégrer des images sur une page Web. Les schémas d’URI peuvent être utilisés de plusieurs façons. Mais dans tous les cas, il y a du pour et du contre.

Avantages :

• Accélération du chargement des pages. 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.
• Amélioration des performances. Le navigateur nécessite moins de temps CPU.
• Les pages Web deviennent indépendantes des fichiers externes, ce qui les rend faciles à partager même hors ligne.

Inconvénients :

• La taille des données encodées en Base64 est 1/3 plus grande que l’image binaire.
• Les images encodées ne sont pas mises en cache par le navigateur et seront téléchargées à chaque visite d’une telle page.
• Les images encodées sont difficiles à éditer car la chaîne Base64 doit d’abord être décodée.
• Une image Base64 ne sera jamais indexée par Google car elle n’apparaît pas dans les résultats de recherche d’images.
  
  

Encodeurs Base64 en ligne

Aspose.SVG propose des applications en ligne gratuites pour encoder et décoder des données binaires :

• Encodeurs Base64 sont un ensemble d’outils qui vous permettent d’encoder des données binaires dans différents formats de sortie : Plain Base64, JSON, XML, URI ou CSS.
• Décodeur Image Base64 convertit un URI de données contenant une chaîne Base64 en une image en collant une chaîne URI dans le contrôle d’entrée.

Nos applications basées sur un navigateur fonctionnent sur toutes les plateformes, y compris Windows, Linux, Mac OS, Android et iOS. Aucun enregistrement, plugin ou installation de logiciel requis pour vous. Commencez à utiliser nos outils d’encodage/décodage Base64 en ligne de manière sûre, sécurisée et simple !

Exemples d'utilisation de l'encodage Base64

<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

Premiers pas avec l'API SVG .NET