Convierta la imagen a Base64 en línea o en C#

Codificar imágenes en línea

Acerca del esquema URI

URI de datos es un método para incrustar imágenes y otros archivos en páginas web como una cadena de texto basada en la codificación Base64. El esquema de URI de datos le permite incluir cualquier dato binario en documentos HTML, CSS, JSON o SVG. Por ejemplo, puede incrustar imágenes en una página web como si se hubieran cargado desde un recurso externo, pero en lugar de especificar la URL del archivo, inserte el contenido codificado en Base64 de la imagen. El esquema de URI de datos se definió en RFC 2397 y, a partir de 2022, es totalmente compatible con la mayoría de los principales navegadores. La principal ventaja del uso de URI de datos es la aceleración de la carga de la página porque el navegador no necesita realizar una solicitud web adicional para recuperar el archivo, ya que la imagen ya está incrustada en el documento HTML.

La sintaxis del URI de datos es la siguiente: data:[<mime type>][;charset=<charset>][;base64],<encoded data>.

Debido a que el tamaño de los datos codificados en Base64 aumenta en un 33 %, se recomienda usar URI de datos solo para imágenes pequeñas. Las imágenes grandes de Base64 producen una gran cantidad de código en el HTML, lo que resulta en una pérdida de beneficios de rendimiento. Si necesita convertir la imagen a Base64 y usar una cadena codificada para incrustar en un archivo de texto, aprenda primero todos los pros y los contras.

Cómo convertir una imagen a Base64 en C#

Para convertir una imagen a una cadena Base64, usamos Aspose.SVG for .NET API, que es una API rica en funciones, potente y fácil de usar. utilice la API de manipulación de documentos para la plataforma C#. Consideramos el ejemplo de la codificación de imagen PNG a Base64 e incrustación de cadena Base64 como URI de datos en un documento SVG. Estas operaciones se pueden hacer con unas pocas líneas de código:

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

Pasos para convertir una imagen a Base64 en C#

1. Abra una imagen para convertir. Utilice el método ReadAllBytes(path) para abrir la imagen PNG y leer el contenido del archivo en una matriz de bytes.
2. Inicialice una nueva instancia de la clase SVGDocument.
3. Use el método CreateElementNS(namespaceURI,qualifiedName) de la clase SVGDocument para crear un instancia de imagen El namespaceURI establece la referencia a la especificación W3C SVG. El qualifiedName debe contener el nombre de la etiqueta de cadena del elemento de la imagen.
4. Convierta la imagen a Base64. Llame al método ToBase64String(bytes) para convertir una matriz de enteros de 8 bits en su representación de cadena equivalente codificada en dígitos base64.
5. Agregue el elemento de imagen al documento SVG usando el método AppendChild(node).
6. Llame al método Save(path) para guardar el documento SVG.

Pros y contras de URI de datos

El URI de datos nos brinda una forma inteligente de incrustar imágenes en una página web. Los esquemas de URI se pueden utilizar de muchas maneras. Pero en cualquier caso, hay pros y contras.

Pros:

• Acelerar la carga de la página. El navegador no necesita realizar una solicitud web adicional para recuperar el archivo porque la imagen ya está incrustada en el documento HTML.
• Mejora del rendimiento. El navegador requiere menos tiempo de CPU.
• Las páginas web se vuelven independientes de los archivos externos, lo que facilita compartirlas incluso sin conexión.

Desventajas:

• El tamaño de los datos codificados en Base64 es 1/3 más grande que la imagen binaria.
• El navegador no almacena en caché las imágenes codificadas y se descargarán cada vez que se visite dicha página.
• Las imágenes codificadas son difíciles de editar porque primero se debe decodificar la cadena Base64.
• Google nunca indexará una imagen Base64 porque no aparece en los resultados de búsqueda de imágenes.
  
  

Codificadores Base64 en línea

Aspose.SVG ofrece aplicaciones en línea gratuitas para codificar y decodificar datos binarios:

• Codificadores Base64 son un conjunto de herramientas que le permiten codificar datos binarios en varios formatos de salida: Plain Base64, JSON, XML, URI o CSS.
• Image Base64 Decoder convierte un URI de datos que contiene una cadena Base64 en una imagen pegando una cadena URI en el control de entrada.

Nuestras aplicaciones basadas en navegador funcionan en todas las plataformas, incluidas Windows, Linux, Mac OS, Android e iOS. No se requiere registro, complemento o instalación de software para usted. ¡Comience a usar nuestras herramientas de codificación/descodificación Base64 en línea de manera segura, segura y fácil!

Ejemplos de uso de codificación 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..."
  }
}

Preguntas más frecuentes

Comience con API Aspose.SVG for .NET