Convertir una imagen a Base64 mediante JavaScript

Convertir una imagen a una cadena Base64 en JavaScript puede ser extremadamente útil en muchos escenarios de desarrollo web modernos. Una de las razones más comunes para usar Base64 es enviar datos de imágenes a través de una API, donde los archivos binarios podrían no ser aceptados directamente. Base64 también es conveniente cuando se desea mostrar una vista previa de una imagen cargada antes de enviarla al servidor. En lugar de cargar el archivo inmediatamente, se puede convertir en una cadena Base64 y renderizarlo directamente en el navegador. Este enfoque ayuda a mejorar la experiencia del usuario y crea interfaces más interactivas.

JavaScript proporciona una herramienta muy práctica para esta tarea: la API FileReader. Con FileReader, se puede leer el contenido de un archivo de imagen seleccionado mediante un elemento <input type="file" /> y convertirlo en una cadena codificada en Base64. Una vez completada la conversión, puede usar la cadena resultante en cualquier lugar: incrustarla en JSON, enviarla mediante AJAX o mostrarla como vista previa de una imagen. Es especialmente popular cuando necesita validar o procesar imágenes antes de subirlas.

Antes de convertir la imagen, conviene comprobar su tamaño. Los archivos grandes pueden ralentizar el proceso de conversión, afectar el rendimiento e incluso causar problemas de memoria en el navegador. En el ejemplo que se añadirá a este artículo, incluiremos una comprobación del tamaño del archivo con un límite de unos 9 MB. Este límite se puede ajustar fácilmente según las necesidades de su proyecto. Puede aumentarlo, reducirlo o eliminar la validación por completo si el tamaño del archivo no le preocupa.

HTML

<input type="file" 
       accept="image/png, image/jpeg" 
       id="field"
       />
<div id="imgbox"></div>

JavaScript

const imgField = document.getElementById('field');

function readFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    // set the limit to about 9 MB
    const maxFileSize = 9000000;

    if (file.size > maxFileSize) {
      reject('error size');
      return;
    }

    reader.addEventListener(
      'load',
       () => {
        resolve(reader.result);
      },
      false
    );

    reader.addEventListener(
      'error',
      () => {
        reject('something went wrong');
      },
      false
    );

    reader.readAsDataURL(file);
  });
}

imgField.addEventListener('change', (ev) => {
  
  const files = ev.target.files;
  
  if (files && files[0]) {
    
      readFile(files[0])
        .then((base64str) => {
            
          // do something with the string...
          const img = document.createElement('img');
          img.src = base64str;
          document.getElementById('imgbox').appendChild(img);
        })
        .catch((err) => {
          alert(err);
        });
  }
});

Aunque convertir imágenes a Base64 en JavaScript suele ser sencillo, tenga en cuenta que las cadenas Base64 son más grandes que los archivos binarios originales. Esto es normal, ya que Base64 añade aproximadamente un 33 % más de datos. Por ello, usar Base64 para imágenes grandes o almacenar muchas cadenas Base64 en bases de datos puede no ser la mejor opción. Sin embargo, para vistas previas, pruebas o solicitudes API sencillas, suele ser la opción más sencilla y eficaz.

Además de la conversión basada en JavaScript, existen muchos servicios en línea que permiten convertir imágenes a Base64 al instante. Estas herramientas pueden ser útiles cuando se necesita una conversión rápida sin escribir código. Por ejemplo, se puede usar el servicio en línea StringUtils para convertir una imagen a Base64.

En general, convertir imágenes a Base64 mediante JavaScript proporciona flexibilidad, mejora la experiencia del usuario y simplifica la gestión de datos en muchas aplicaciones web. Es una técnica práctica que todo desarrollador web debería conocer, especialmente al trabajar con subidas de archivos o procesamiento dinámico de imágenes. Ya sea que trabajes con vistas previas, subidas a la API o almacenamiento temporal, Base64 puede ser una herramienta valiosa en tu flujo de trabajo.

Puedes ver un ejemplo del código funcionando en Codepen: https://codepen.io/igorrybalko/pen/MYyqYRW