Ricevi l'URL dei dati delle immagini in JavaScript?

Ho una normale pagina HTML con alcune immagini (solo normali <img />tag HTML). Vorrei ottenere il loro contenuto, codificato in base64 preferibilmente, senza la necessità di scaricare nuovamente l'immagine (cioè è già caricata dal browser, quindi ora voglio il contenuto).

Mi piacerebbe raggiungerlo con Greasemonkey e Firefox.

Nota: funziona solo se l'immagine proviene dallo stesso dominio della pagina o ha l' crossOrigin="anonymous"attributo e il server supporta CORS. Inoltre non ti fornirà il file originale, ma una versione ricodificata. Se hai bisogno che il risultato sia identico all'originale, vedi la risposta di Kaiido .

Sarà necessario creare un elemento canvas con le dimensioni corrette e copiare i dati dell'immagine con la drawImagefunzione. Quindi puoi usare la toDataURLfunzione per ottenere un dato: url che ha l'immagine codificata in base 64. Si noti che l'immagine deve essere completamente caricata, oppure si torna indietro un'immagine vuota (nera, trasparente).

Sarebbe qualcosa del genere. Non ho mai scritto uno script Greasemonkey, quindi potrebbe essere necessario modificare il codice per l'esecuzione in quell'ambiente.

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,/, "");
}

Ottenere un'immagine in formato JPEG non funziona con le versioni precedenti (circa 3.5) di Firefox, quindi se vuoi supportarlo, devi verificarne la compatibilità. Se la codifica non è supportata, verrà automaticamente impostata su "image / png".

Questa funzione accetta l'URL, quindi restituisce l'immagine 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;
}

Chiamalo così: getBase64FromImageUrl("images/slbltxt.png")

Prossimamente, ma nessuna delle risposte qui è del tutto corretta.

Quando disegnato su una tela, l'immagine passata è non compressa + tutto pre-moltiplicato.
Quando viene esportato, viene decompresso o ricompresso con un algoritmo diverso e non moltiplicato.

Tutti i browser e i dispositivi presenteranno errori di arrotondamento diversi durante questo processo
(consultare Impronta digitale su tela ).

Quindi, se si desidera una versione base64 di un file di immagine, è necessario richiederlo di nuovo (il più delle volte verrà dalla cache) ma questa volta come BLOB.

Quindi è possibile utilizzare un FileReader per leggerlo come ArrayBuffer o come 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 versione più moderna della risposta di kaiido usando fetch sarebbe:

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

Modifica: Come sottolineato nei commenti, questo restituirà un url oggetto che punta a un file nel tuo sistema locale anziché a un DataURL reale, quindi a seconda del tuo caso d'uso questo potrebbe non essere quello che ti serve.

Puoi guardare la seguente risposta per usare fetch e un dato realeURL: https://stackoverflow.com/a/50463054/599602

shiv / shim / sham

Se le tue immagini sono già state caricate (o meno), questo "strumento" potrebbe tornare utile:

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);
    }}
);

.. ma perché?

Ciò ha il vantaggio di utilizzare i dati di immagine "già caricati", quindi non è necessaria alcuna richiesta aggiuntiva. Aditionally permette l'utente finale (programmatore come te) decidere le CORS e / o mime-typee qualityOPPURE si può lasciare fuori questi argomenti / parametri come descritto nella MDN specifiche qui .

Se hai caricato questo JS (prima di quando è necessario), la conversione in dataURLè semplice come:

esempi

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

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

Fingerprinting GPU

Se sei preoccupato per la "precisione" dei bit, puoi modificare questo strumento in base alle tue esigenze, come fornito dalla risposta di @ Kaiido.

Utilizzare l' onloadevento per convertire l'immagine dopo il caricamento

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>

In HTML5 meglio usare questo:

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