Wie kann ich die Daten-URL eines Bildes in JavaScript abrufen, ohne es erneut herunterzuladen?

Bilddaten-URL in JavaScript abrufen

Diese Frage sucht nach einer Methode zum Abrufen der Daten-URL eines Bildes, das bereits auf ein geladen wurde Webseite mit JavaScript, speziell zur Verwendung in Greasemonkey-Skripten mit Firefox. Das Ziel besteht darin, den Base64-codierten Inhalt des Bildes zu erhalten, ohne den Aufwand für ein erneutes Herunterladen zu verursachen.

Lösung:

1. Erstellen Sie eine Leinwand Element: Erstellen Sie ein leeres Leinwandelement mit Abmessungen, die dem gewünschten Bild entsprechen codiert.
2. Bilddaten kopieren: Verwenden Sie die Funktion „drawImage“, um die Bilddaten auf das Canvas-Element zu kopieren. Bei diesem Schritt wird davon ausgegangen, dass das Bild bereits vollständig geladen wurde.
3. Daten-URL abrufen: Verwenden Sie die Funktion „toDataURL“, um eine Daten-URL im gewünschten Format abzurufen, das entweder sein kann PNG oder JPEG. Die bereitgestellte Lösung verwendet einen RegExp, um nur den Base64-codierten Inhalt aus der Daten-URL zu extrahieren.

Hinweis:

a. Diese Methode funktioniert nur, wenn das Bild auf derselben Domain wie die Webseite gehostet wird.
b. Das resultierende Bild ist eine neu codierte Version und keine exakte Kopie der Originaldatei.
c. Der bereitgestellte JavaScript-Code geht von einer Greasemonkey-Umgebung aus.

Das obige ist der detaillierte Inhalt vonWie kann ich die Daten-URL eines Bildes in JavaScript abrufen, ohne es erneut herunterzuladen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!