¿Cómo puedo convertir una imagen en Base64? string usando JavaScript?

Hola usuario de nuestra página web, hemos encontrado la solución a tu búsqueda, continúa leyendo y la obtendrás más abajo.

Solución:

Hay varios enfoques entre los que puede elegir:

1. Enfoque: FileReader

Cargue la imagen como blob a través de XMLHttpRequest y use la API de FileReader (readAsDataURL()) para convertirla en una URL de datos:

function toDataURL(url, callback) 
  var xhr = new XMLHttpRequest();
  xhr.onload = function() 
    var reader = new FileReader();
    reader.onloadend = function() 
      callback(reader.result);
    
    reader.readAsDataURL(xhr.response);
  ;
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();


toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) 
  console.log('RESULT:', dataUrl)
)

Este ejemplo de código también podría implementarse utilizando la API de obtención de WHATWG:

const toDataURL = url => fetch(url)
  .then(response => response.blob())
  .then(blob => new Promise((resolve, reject) => 
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(blob)
  ))


toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0')
  .then(dataUrl => 
    console.log('RESULT:', dataUrl)
  )

Estos enfoques:

• falta de compatibilidad con el navegador

• tener mejor compresión
• también funciona para otros tipos de archivos

Soporte del navegador:

• http://caniuse.com/#feat=filereader
• http://caniuse.com/#feat=buscar

---

2. Enfoque: Lienzo

Cargue la imagen en un objeto de imagen, píntela en un lienzo no contaminado y vuelva a convertir el lienzo en una URL de datos.

function toDataURL(src, callback, outputFormat) 

toDataURL(
  'https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0',
  function(dataUrl) 
    console.log('RESULT:', dataUrl)
  
)

En detalle

Formatos de entrada admitidos:

image/png, image/jpeg, image/jpg, image/gif, image/bmp, image/tiff, image/x-icon, image/svg+xml, image/webp, image/xxx

Formatos de salida admitidos:

image/png, image/jpeg, image/webp(cromo)

Soporte del navegador:

• http://caniuse.com/#feat=canvas

• Internet Explorer 10 (Internet Explorer 10 solo funciona con imágenes del mismo origen)

---

3. Enfoque: imágenes del sistema de archivos local

Si desea convertir imágenes del sistema de archivos de los usuarios, debe adoptar un enfoque diferente. Utilice la API de FileReader:

function encodeImageFileAsURL(element) 
  var file = element.files[0];
  var reader = new FileReader();
  reader.onloadend = function() 
    console.log('RESULT', reader.result)
  
  reader.readAsDataURL(file);

Puedes usar el HTML5 para ello:

Cree un lienzo, cargue su imagen en él y luego use toDataURL() para obtener la representación de Base64 (en realidad, es un data: URL, pero contiene la imagen codificada en Base64).

Este fragmento puede convertir su stringimagen e incluso archivo de video a Base64 string datos.

Puedes patrocinar nuestra publicación escribiendo un comentario y puntuándolo te damos las gracias.

---

---

Utiliza Nuestro Buscador