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 drawImage
Funktion kopieren . Dann können Sie die toDataURL
Funktion 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.
drawImage
wird nichts tun, und Sie erhalten eine leere Leinwand und das resultierende Bild.Diese Funktion verwendet die URL und gibt dann das Bild BASE64 zurück
Nennen Sie es so:
getBase64FromImageUrl("images/slbltxt.png")
quelle
img.src =
nach setzenimg.onload =
, da in einigen Browsern, wie z. B. Opera, das Ereignis nicht auftritt.getBase64FromImageUrl(url)
und beendetimg.onload = function ()
sind, ist img nicht mehr erreichbar und der Müll wird gesammelt. Anders als IE 6/7 und das ist in Ordnung.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.
quelle
XMLHttpRequest cannot load data:image/jpeg;base64,/9j/4AA ... /2Q==. Invalid response. Origin 'https://example.com' is therefore not allowed access.
Eine modernere Version von Kaiidos Antwort mit Fetch wäre:
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
quelle
URL.revokeObjectURL()
wenn Sie eine lang laufende Anwendung mit dieser Methode haben, sonst wird Ihr Speicher überfüllt.shiv / shim / sham
Wenn Ihre Bilder bereits geladen sind (oder nicht), kann dieses "Werkzeug" nützlich sein:
.. 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-type
undquality
-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
HTML
JS
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.
quelle
Verwenden Sie
onload
event, um das Bild nach dem Laden zu konvertierenCode-Snippet anzeigen
quelle
Verwenden Sie in HTML5 dies besser:
quelle