0

quisiera saber como puedo convertir a base64 una imagen que tengo guardada en mi computadora que tiene una url como esta (carpeta/id/img.jpg)

Hasta ahora he intentado esto pero no me funciona, cuando hago el console.log y veo en la consola la ruta data: que me trae y le doy clic sale todo negro sin traer ninguna imagen

var c = document.createElement('canvas');

        c.width = 200;
        c.height = 200;

        var ctx = c.getContext('2d');

        var img = new Image();

            img.src = url;

            ctx.drawImage(img, 0, 0);

            var imgData = ctx.getImageData(0, 0, 200, 200);

            ctx.putImageData(imgData, 0, 0);

        var file = c.toDataURL();

        console.log( file );
5
  • url no existe tu código debe marcar error por eso Commented el 20 dic. 2018 a las 1:41
  • @RuslanLópez la url se la paso por una respuesta que traigo de un ajax y me da una ruta Commented el 20 dic. 2018 a las 1:43
  • Eso no se puede saber por tu ejemplo, por favor asegurate de tener un ejemplo mínimo verificable Commented el 20 dic. 2018 a las 1:46
  • @RuslanLópez aunque ponga una url de una imagen en la web no lo pinta de todas formas Commented el 20 dic. 2018 a las 1:49
  • Entonces como vamos a descartar que tu problema no sea la imágen? Commented el 20 dic. 2018 a las 1:50

1 respuesta 1

0

Es probable que tu imagen no esté cargada. Una solución sería utilizar img.onload de esta manera:

var img=new Image(); 
img.src = "carpeta/id/img.jpg"; 
img.onload = function() {. . . . }

Otra solucion sería poner tu imagen en alguna parte dentro del documento y utilizar esta imagen, algo así:

var img = document.getElementById("img");
ctx.drawImage( img, x, y ,w, h );

Me gusta poner esta imagen dentro del elemento canvas ya que es una manera de esconderla. En tu caso tendrías que encontrar otra manera de esconderla (si te molesta) ya que estas creando el elemento canvas. Espero que sea lo que necesitas.

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.