Bilddaten-URL in JavaScript abrufen?

Ich habe eine normale HTML-Seite mit einigen Bildern (nur normale <img />HTML-Tags). Ich möchte ihren Inhalt, vorzugsweise Base64-codiert, erhalten, ohne dass das Bild erneut heruntergeladen werden muss (dh es wird bereits vom Browser geladen, daher möchte ich jetzt den Inhalt).

Ich würde das gerne mit Greasemonkey und Firefox erreichen.

Hinweis: Dies funktioniert nur, wenn das Image aus derselben Domäne wie die Seite stammt oder das crossOrigin="anonymous"Attribut hat und der Server CORS unterstützt. Sie erhalten auch nicht die Originaldatei, sondern eine neu codierte Version. Wenn das Ergebnis mit dem Original identisch sein soll, lesen Sie die Antwort von Kaiido .

Sie müssen ein Canvas-Element mit den richtigen Abmessungen erstellen und die Bilddaten mit der drawImageFunktion kopieren . Dann können Sie die toDataURLFunktion verwenden, um eine Daten-URL abzurufen, die das Base-64-codierte Bild enthält. Beachten Sie, dass das Bild vollständig geladen sein muss, sonst erhalten Sie nur ein leeres (schwarzes, transparentes) Bild zurück.

Es wäre so etwas. Ich habe noch nie ein Greasemonkey-Skript geschrieben, daher müssen Sie möglicherweise den Code anpassen, um in dieser Umgebung ausgeführt zu werden.

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

Das Abrufen eines JPEG-formatierten Bildes funktioniert in älteren Versionen (ca. 3.5) von Firefox nicht. Wenn Sie dies unterstützen möchten, müssen Sie die Kompatibilität überprüfen. Wenn die Codierung nicht unterstützt wird, wird standardmäßig "image / png" verwendet.

Diese Funktion verwendet die URL und gibt dann das Bild BASE64 zurück

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

Nennen Sie es so: getBase64FromImageUrl("images/slbltxt.png")

Es kommt lange danach, aber keine der Antworten hier ist völlig richtig.

Beim Zeichnen auf einer Leinwand wird das übergebene Bild unkomprimiert + alle vormultipliziert.
Beim Export wird es unkomprimiert oder mit einem anderen Algorithmus erneut komprimiert und nicht multipliziert.

Bei allen Browsern und Geräten treten unterschiedliche Rundungsfehler auf
(siehe Canvas-Fingerabdruck) ).

Wenn man also eine base64-Version einer Bilddatei möchte, muss man sie erneut anfordern (meistens kommt sie aus dem Cache), diesmal jedoch als Blob.

Anschließend können Sie einen FileReader verwenden , um ihn entweder als ArrayBuffer oder als dataURL zu lesen.

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">

Eine modernere Version von Kaiidos Antwort mit Fetch wäre:

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

Bearbeiten: Wie in den Kommentaren erwähnt, gibt dies eine Objekt-URL zurück, die auf eine Datei in Ihrem lokalen System anstelle einer tatsächlichen DataURL verweist. Abhängig von Ihrem Anwendungsfall ist dies möglicherweise nicht das, was Sie benötigen.

Sie können sich die folgende Antwort ansehen, um Fetch und eine tatsächliche Daten-URL zu verwenden: https://stackoverflow.com/a/50463054/599602

shiv / shim / sham

Wenn Ihre Bilder bereits geladen sind (oder nicht), kann dieses "Werkzeug" nützlich sein:

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

.. aber warum?

Dies hat den Vorteil, dass die "bereits geladenen" Bilddaten verwendet werden, sodass keine zusätzliche Anforderung erforderlich ist. Zusätzlich kann der Endbenutzer (Programmierer wie Sie) das CORS entscheiden und / oder mime-typeund quality-OR- Sie können diese Argumente / Parameter weglassen, wie in der MDN- Spezifikation hier beschrieben .

Wenn Sie dieses JS geladen haben (bevor es benötigt wird), konvertieren Sie zu dataURL so einfach wie:

Beispiele

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

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

GPU-Fingerabdruck

Wenn Sie sich Sorgen über die "Genauigkeit" der Bits machen, können Sie dieses Tool an Ihre Bedürfnisse anpassen, wie in der Antwort von @ Kaiido angegeben.

Verwenden Sie onloadevent, um das Bild nach dem Laden zu konvertieren

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>

Verwenden Sie in HTML5 dies besser:

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