Codifique la imagen en Base64 en línea o en C#

Convierta la imagen en una cadena codificada en Base64. Se admiten JPG, JPEG, PJP, PJPEG, PNG, BMP, XBM, GIF, TIFF, ICO, IFIF, WEBP y otros formatos de imagen.

Download from NuGet
 

Aspose.SVG for .NET Aspose.SVG for .NET

  Free Trial   Pricing Buy

Codificación Base64

Base64 es un grupo de esquemas de codificación similares para convertir datos binarios en un formato de texto ASCII. Base64 se usa generalmente para transferir datos a través de Internet. El resultado de convertir una imagen a Base64 es solo un conjunto de letras latinas, números y dos caracteres: “+” y “/”. Cualquier navegador sabe qué hacer con ellos. En otras palabras, Base64 es un tipo de codificación de binario a texto. La cadena codificada en Base64 se usa en varios formatos de salida: Base64 simple, JSON, XML, URI de datos o CSS.

Base64 es especialmente común en la Web, donde su uso incluye la capacidad de incrustar archivos de imagen u otros recursos binarios dentro de recursos de texto, como archivos HTML y CSS. Incluir los datos de la imagen en el archivo HTML significa que el navegador no necesita realizar una solicitud web adicional para recuperar el archivo porque la imagen ya está incrustada en el documento HTML. Se recomienda utilizar la codificación Base64 solo para imágenes pequeñas. Las imágenes grandes de Base64 dan como resultado una gran cantidad de código en HTML, lo que resulta en una pérdida de beneficios de rendimiento. También se debe tener en cuenta que Google nunca indexará una imagen Base64 porque no aparece en las búsquedas de imágenes.

Convertir imagen a Base64 en línea

¡Codifique imágenes con Aspose.SVG para .NET API en tiempo real! Cargue una imagen del sistema de archivos local e inmediatamente obtendrá el resultado como URI de datos, fuente de imagen Base64 y fuente de fondo CSS Base64. Se admiten JPG, JPEG, SVG, PJP, PJPEG, PNG, BMP, XBM, GIF, TIFF, ICO, IFIF, WEBP y otros formatos de imagen.

Convertir imagen a Base64 en C#

Este artículo considera cómo codificar un archivo de imagen en una cadena Base64 usando las características de la API Aspose.SVG .NET. El siguiente ejemplo de C# demuestra cómo convertir una imagen PNG en una cadena Base64 e incrustarla en un archivo SVG. El método ReadAllBytes(cadena) se usa para abrir una imagen (archivo binario) y leer el contenido del archivo en una matriz de bytes. El método ToBase64String(bytes) convierte una matriz de enteros de 8 bits en su representación de cadena equivalente codificada en base de 64 dígitos. El método AppendChild() luego agrega la imagen codificada en Base64 al documento SVG.

Código C# para convertir una imagen PNG a 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");

El fragmento del archivo image-base64.svg resultante se muestra a continuación. La cadena Base64 se cortó para no saturar el ejemplo de código SVG. El formato para incrustar la imagen Base64 como datos URI es el siguiente, para ser específicos:

data:[<mime type>][;charset=<charset>][;base64],<datos codificados>

Código SVG para incrustar imagen Base64

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

Incrustar una imagen Base64 en HTML


¿Por qué necesitaría convertir la imagen a Base64? Las imágenes codificadas en Base64 se pueden incrustar en HTML utilizando la etiqueta <img>. Simplemente pegue los datos de la imagen directamente en el archivo HTML utilizando el URI de datos. La codificación Base64 y el uso del esquema URI de datos reducen la cantidad de solicitudes HTTP que un navegador necesita para mostrar una página web. Este fragmento de código demuestra cómo puede incrustar imágenes Base64 en HTML.

Código HTML para incrustar la imagen Base64 como URI de datos

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

El URI de datos consta de dos partes separadas por una coma. La primera parte especifica una imagen codificada en Base64 y la segunda parte especifica una cadena de imagen codificada en Base64:

  1. data:image/jpeg;base64, es el encabezado del esquema URI de datos.
  2. iVBORw0KGgoAAAANSUhEUg... son los datos codificados en Base64.

Ejemplo de una imagen Base64 incrustada como código de fondo CSS


Una forma más de reducir el número de solicitudes HTTP de imágenes es el uso de la propiedad background-image de CSS. La propiedad background-image define las imágenes como el fondo de un elemento. Cada imagen para la propiedad background-image se puede especificar como una URL o como un URI de datos de imagen. La diferencia es que en el primer caso el navegador envía una solicitud HTTP para obtener la imagen externa, mientras que en el segundo caso la imagen Base64 está directamente incrustada en el documento y no señala otras fuentes. Por lo tanto, el navegador no necesita cargar solicitudes HTTP para entregar el resultado.

Código CSS para incrustar la imagen Base64 como URI de datos

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

Codificadores Base64 en línea

Los Codificadores Base64 en línea convierten el contenido de documentos SVG o archivos de imagen en su representación de cadena equivalente codificada con dígitos base-64. También proporcionan ejemplos para URI de datos, JSON, XML y otros. Las herramientas de codificación lo ayudan a evitar varios problemas de codificación de datos que hacen que el contenido del sitio web o los mensajes de correo electrónico sean ilegibles. Los codificadores Base64 son seguros, fáciles de usar y completamente gratuitos. Funcionan en cualquier navegador y en cualquier sistema operativo. ¡Convierta la imagen a Base64 gratis ahora mismo!

Instalación de Aspose.SVG para la biblioteca .NET

Aspose.SVG para .NET es una biblioteca flexible multiplataforma que está diseñada para proporcionar una amplia gama de funciones para procesar y representar documentos SVG. Se integra a la perfección en sus aplicaciones .NET para trabajar con archivos SVG sin instalar ningún software de terceros. Nuestra API SVG .NET se puede usar con cualquier lenguaje .NET, como C#, VB.NET, ASP.NET, etc. Funciona igual de bien en cualquier sistema operativo que pueda instalar Mono (compatible con .NET 4.0 Framework) o usar .NET núcleo. Esto incluye Windows, Linux y macOS.

Instalación de Aspose.SVG para .NET a través de NuGet :

  1. Usando la consola del administrador de paquetes.
  2. Uso de la GUI del Administrador de paquetes NuGet.

Para obtener más detalles sobre la instalación de la biblioteca de C#, consulte Documentación de Aspose.SVG.

Otros codificadores compatibles

Puede codificar la imagen en Base64: se admiten los formatos JPG, PNG, BMP, GIF, TIFF, ICO y SVG: