0

¿Cómo hago una función parecida a la siguiente, pero en Javascript?

// PHP file
<?php 
$path = 'images/imagen.png';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);

algo como:

// JS file
convertirImagen(url){
  ...
  return url;
};
console.log(convertirImagen('images/imagen.png')); // base 64 de imagen

La idea es sólo pasar un parámetro y que me devuelva el string en base64 para usarlo de esta forma:

var imagen = document.getElementById('miimagen');
imagen.setAttribute('src', convertirImagen('images/imagen.png');

Antes vi esta opción pero no entiendo el uso del callback y busco una forma de simplificarlo

function imgToBase64(url, callback) {
    if (!window.FileReader) {
      callback(null);
      return;
    }
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function() {
            var reader = new FileReader();
            reader.onloadend = function() {
                callback(reader.result);
            };
            reader.readAsDataURL(xhr.response);
        };
        xhr.open('GET', url);
        xhr.send();
    }
1
  • Muchas gracias por la edición! Commented el 26 jul. 2017 a las 22:08

2 respuestas 2

2

Puedes utilizar un canvas, dibujarlo a traves de la imagen que quieras y obtener el codigo base64 que deseas

function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL();
  return dataURL;
}

var base64 = getBase64Image(document.getElementById("img"));
console.log(base64);
<img id="img" src="http://static.13.cl/7/sites/all/themes/portal/resources/images/logo_13cl-2x.png">

Nota : Este codigo no funcionara en el snippet por temas de seguridad hacia la imagen.

0

Usando FileReader

  1. Creamos un nuevo FileReader fileReader.
  2. Se le añade un evento de tipo load a fileReader que sera ejecutado una vez este cargada la imagen, del cual podremos extraer la imagen en base64, accediendo a la propiedad fileReader.result.
  3. Se usa un callback porque FileReader es asíncrono, por tanto hay que pasarle una función, que sera llamada una vez termine de cargar la imagen.

  4. Finalmente le decimos a fileReader que lea la imagen como una url de datos, a través del método readAsDataURL(img), file deber ser un objeto de tipo File.

/*
* @param { img }: File
* @param { callback }: function 
*/
function getBase64FomFile(img, callback){
  let fileReader = new FileReader();
  fileReader.addEventListener('load' function(evt){
    callback(fileReader.result);
  });
  fileReader.readAsDataURL(img);
}

/* Seria usada de la siguiente manera */
getBase64FromFile(file, function(base64){
  console.log(base64)
});

Nota : El snippet no funcionara

2
  • Espero te sea de ayuda
    – Keff
    Commented el 10 ago. 2017 a las 15:53
  • muchas gracias por aclararme el funcionamiento de la función, sobretodo la parte del callback. Si no me equivoco al usar fileReader se asume que se está usando un input type file para subir la imagen, como puedo hacerlo pero pasando un string con la url? El caso es que debo generar un pdf y pensaba en la librería pdfMake o pdfjs, debo usar imágenes variables. Ponía el ejemplo con la función de php por que me resulto muy cómodo cuando lo probaba, ¿sabes cómo puedo ejecutar esa función, la de php, con ajax cada vez que necesite una imagen en base 64? y usarla asi en el pdf Commented el 11 ago. 2017 a las 17:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.