Obtener URL de datos de imagen en JavaScript?

Tengo una página HTML normal con algunas imágenes (solo <img />etiquetas HTML normales ). Me gustaría obtener su contenido, codificado en base64 preferiblemente, sin la necesidad de volver a descargar la imagen (es decir, ya está cargada por el navegador, así que ahora quiero el contenido).

Me encantaría lograr eso con Greasemonkey y Firefox.

Nota: Esto solo funciona si la imagen es del mismo dominio que la página, o tiene el crossOrigin="anonymous"atributo y el servidor admite CORS. Tampoco le dará el archivo original, sino una versión codificada nuevamente. Si necesita que el resultado sea idéntico al original, vea la respuesta de Kaiido .

Deberá crear un elemento de lienzo con las dimensiones correctas y copiar los datos de la imagen con la drawImagefunción. Luego puede usar la toDataURLfunción para obtener datos: url que tiene la imagen codificada en base 64. Tenga en cuenta que la imagen debe estar completamente cargada, o simplemente obtendrá una imagen vacía (negra, transparente).

Sería algo como esto. Nunca he escrito un script de Greasemonkey, por lo que es posible que deba ajustar el código para que se ejecute en ese entorno.

function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to
    // guess the original format, but be aware the using "image/jpg"
    // will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

Obtener una imagen con formato JPEG no funciona en versiones anteriores (alrededor de 3.5) de Firefox, por lo que si desea admitir eso, deberá verificar la compatibilidad. Si la codificación no es compatible, el valor predeterminado será "image / png".

Esta función toma la URL y luego devuelve la imagen BASE64

function getBase64FromImageUrl(url) {
    var img = new Image();

    img.setAttribute('crossOrigin', 'anonymous');

    img.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width =this.width;
        canvas.height =this.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);

        var dataURL = canvas.toDataURL("image/png");

        alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
    };

    img.src = url;
}

Llámalo así: getBase64FromImageUrl("images/slbltxt.png")

Mucho después, pero ninguna de las respuestas aquí es completamente correcta.

Cuando se dibuja en un lienzo, la imagen pasada se descomprime y se multiplica previamente.
Cuando se exporta, se descomprime o vuelve a comprimir con un algoritmo diferente y no se multiplica.

Todos los navegadores y dispositivos tendrán diferentes errores de redondeo en este proceso
(ver Huellas digitales de Canvas ).

Entonces, si uno quiere una versión base64 de un archivo de imagen, debe solicitarlo nuevamente (la mayoría de las veces vendrá del caché) pero esta vez como un Blob.

Luego puede usar un FileReader para leerlo como ArrayBuffer o como dataURL.

function toDataURL(url, callback){
    var xhr = new XMLHttpRequest();
    xhr.open('get', url);
    xhr.responseType = 'blob';
    xhr.onload = function(){
      var fr = new FileReader();
    
      fr.onload = function(){
        callback(this.result);
      };
    
      fr.readAsDataURL(xhr.response); // async call
    };
    
    xhr.send();
}

toDataURL(myImage.src, function(dataURL){
  result.src = dataURL;

  // now just to show that passing to a canvas doesn't hold the same results
  var canvas = document.createElement('canvas');
  canvas.width = myImage.naturalWidth;
  canvas.height = myImage.naturalHeight;
  canvas.getContext('2d').drawImage(myImage, 0,0);

  console.log(canvas.toDataURL() === dataURL); // false - not same data
  });

<img id="myImage" src="https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png" crossOrigin="anonymous">
<img id="result">

Una versión más moderna de la respuesta de kaiido usando fetch sería:

function toObjectUrl(url) {
  return fetch(url)
      .then((response)=> {
        return response.blob();
      })
      .then(blob=> {
        return URL.createObjectURL(blob);
      });
}

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Editar: como se señaló en los comentarios, esto devolverá una URL de objeto que apunta a un archivo en su sistema local en lugar de un DataURL real, por lo que, según su caso de uso, esto podría no ser lo que necesita.

Puede consultar la siguiente respuesta para usar fetch y una dataURL real: https://stackoverflow.com/a/50463054/599602

shiv / shim / sham

Si sus imágenes ya están cargadas (o no), esta "herramienta" puede ser útil:

Object.defineProperty
(
    HTMLImageElement.prototype,'toDataURL',
    {enumerable:false,configurable:false,writable:false,value:function(m,q)
    {
        let c=document.createElement('canvas');
        c.width=this.naturalWidth; c.height=this.naturalHeight;
        c.getContext('2d').drawImage(this,0,0); return c.toDataURL(m,q);
    }}
);

.. ¿pero por qué?

Esto tiene la ventaja de utilizar los datos de imagen "ya cargados", por lo que no se necesita ninguna solicitud adicional. Adicionalmente permite que el usuario final (programador como usted) decidir las CORS y / o mime-typee quality-O- se puede dejar de lado estos argumentos / parámetros tal como se describe en el MDN especificación aquí .

Si tiene este JS cargado (antes de cuando sea necesario), la conversión a dataURLes tan simple como:

ejemplos

<img src="/yo.jpg" onload="console.log(this.toDataURL('image/jpeg'))">

console.log(document.getElementById("someImgID").toDataURL());

Huella digital GPU

Si le preocupa la "precisión" de los bits, puede modificar esta herramienta para que se ajuste a sus necesidades según lo dispuesto por la respuesta de @ Kaiido.

Use el onloadevento para convertir la imagen después de cargar

function loaded(img) {
  let c = document.createElement('canvas')
  c.getContext('2d').drawImage(img, 0, 0)
  msg.innerText= c.toDataURL();
}

pre { word-wrap: break-word; width: 500px; white-space: pre-wrap; }

<img onload="loaded(this)" src="https://cors-anywhere.herokuapp.com/http://lorempixel.com/200/140" crossorigin="anonymous"/>

<pre id="msg"></pre>

En HTML5 mejor use esto:

{
//...
canvas.width = img.naturalWidth; //img.width;
canvas.height = img.naturalHeight; //img.height;
//...
}