Obtenir l'URL des données d'image en JavaScript?

J'ai une page HTML régulière avec quelques images (juste des <img />balises HTML régulières ). J'aimerais obtenir leur contenu, encodé en base64 de préférence, sans avoir besoin de retélécharger l'image (c'est-à-dire qu'elle est déjà chargée par le navigateur, alors maintenant je veux le contenu).

J'adorerais y parvenir avec Greasemonkey et Firefox.

Remarque: cela ne fonctionne que si l'image provient du même domaine que la page ou a l' crossOrigin="anonymous"attribut et que le serveur prend en charge CORS. Cela ne vous donnera pas non plus le fichier d'origine, mais une version ré-encodée. Si vous avez besoin que le résultat soit identique à l'original, voir la réponse de Kaiido .

Vous devrez créer un élément de canevas avec les dimensions correctes et copier les données d'image avec la drawImagefonction. Ensuite, vous pouvez utiliser la toDataURLfonction pour obtenir une donnée: url qui a l'image encodée en base 64. Notez que l'image doit être entièrement chargée, sinon vous récupérerez simplement une image vide (noire, transparente).

Ce serait quelque chose comme ça. Je n'ai jamais écrit de script Greasemonkey, vous devrez donc peut-être ajuster le code pour qu'il s'exécute dans cet environnement.

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

Obtenir une image au format JPEG ne fonctionne pas sur les anciennes versions (environ 3,5) de Firefox, donc si vous voulez prendre en charge cela, vous devrez vérifier la compatibilité. Si l'encodage n'est pas pris en charge, il sera par défaut "image / png".

Cette fonction prend l'URL puis retourne l'image 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;
}

Appelez ça comme ceci: getBase64FromImageUrl("images/slbltxt.png")

Venant longtemps après, mais aucune des réponses ici n'est entièrement correcte.

Lorsqu'elle est dessinée sur un canevas, l'image transmise est non compressée + toutes pré-multipliées.
Lorsqu'il est exporté, il est non compressé ou recompressé avec un algorithme différent et non multiplié.

Tous les navigateurs et les appareils auront des erreurs d'arrondi différentes se produisant dans ce processus
(voir Empreinte digitale de Canvas ).

Donc, si l'on veut une version base64 d'un fichier image, il faut la demander à nouveau (la plupart du temps elle proviendra du cache) mais cette fois en Blob.

Ensuite, vous pouvez utiliser un FileReader pour le lire soit en tant que ArrayBuffer, soit en tant que 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">

Une version plus moderne de la réponse de kaiido utilisant fetch serait:

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

Edit: Comme indiqué dans les commentaires, cela renverra une URL d'objet qui pointe vers un fichier dans votre système local au lieu d'une DataURL réelle, donc selon votre cas d'utilisation, cela pourrait ne pas être ce dont vous avez besoin.

Vous pouvez consulter la réponse suivante pour utiliser l'extraction et une URL de données réelle: https://stackoverflow.com/a/50463054/599602

shiv / shim / sham

Si vos images sont déjà chargées (ou pas), cet "outil" peut être 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);
    }}
);

.. mais pourquoi?

Cela a l'avantage d'utiliser les données d'image "déjà chargées", donc aucune demande supplémentaire n'est nécessaire. De plus, cela permet à l'utilisateur final (programmeur comme vous) de décider du CORS et / ou mime-typeet quality-OU- vous pouvez omettre ces arguments / paramètres comme décrit dans la spécification MDN ici .

Si vous avez chargé ce JS (avant qu'il ne soit nécessaire), la conversion en dataURLest aussi simple que:

exemples

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

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

Empreinte digitale du GPU

Si vous êtes préoccupé par la «précision» des bits, vous pouvez modifier cet outil en fonction de vos besoins, comme indiqué dans la réponse de @ Kaiido.

Utilisez l' onloadévénement pour convertir l'image après le chargement

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 mieux utiliser ceci:

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