Wie kann ich Base64-kodierte Bilddaten von bereits geladenen Bildern in JavaScript erhalten?

Bilddaten-URLs in JavaScript extrahieren

Problem:

Wie können Sie base64- erhalten? codierte Inhalte aus Bildern, die bereits in einen Browser geladen wurden, mithilfe von HTML-Tags, ohne dass dies erforderlich ist Erneut herunterladen?

Lösung für Greasemonkey und Firefox:

Um den Inhalt vollständig geladener Bilder mit Greasemonkey und Firefox zu extrahieren, führen Sie die folgenden Schritte aus:

1. Erstellen Sie eine Leinwand: Erzeugen Sie ein Leinwandelement mit Abmessungen, die mit denen des Bildes übereinstimmen Größe.
2. Bilddaten kopieren: Verwenden Sie die Funktion „drawImage“, um die Daten des Bildes auf die Leinwand zu übertragen.
3. Daten-URL abrufen: Verwenden Sie die toDataURL Funktion zum Abrufen der Base64-codierten Bilddaten aus dem Leinwand.

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

Hinweis: Bei dieser Lösung wird davon ausgegangen, dass Bilddaten von derselben Domäne wie die Seite verfügbar sind oder das Attribut „crossOrigin="anonymous" mit Serverunterstützung für aktiviert ist CORS. Darüber hinaus kann das zurückgegebene Bild neu codiert werden.

Das obige ist der detaillierte Inhalt vonWie kann ich Base64-kodierte Bilddaten von bereits geladenen Bildern in JavaScript erhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!