Wie kann ich mit JavaScript die Base64-Daten-URL eines Bildes abrufen?

So rufen Sie die Bilddaten-URL mit JavaScript ab

Bei der Webentwicklung ist es oft nützlich, auf den Inhalt von Bildern auf einer Webseite zuzugreifen. Dies kann durch JavaScript erreicht werden, sodass Entwickler Bilddaten bearbeiten und nutzen können, ohne sie separat herunterladen zu müssen.

Ein solcher Anwendungsfall besteht darin, die Base64-codierte Darstellung von Bildern zu erhalten, die bereits vom Browser geladen wurden. Dies ist insbesondere bei der Arbeit mit Greasemonkey-Skripten in Mozilla Firefox von Vorteil.

Um die Bilddaten-URL zu erhalten, wird ein Canvas-Element verwendet. Hier ist der Code, den Sie verwenden können:

function getBase64Image(img) {
  // Create a canvas with dimensions matching the image
  const canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

  // Copy the image data onto the canvas
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  // Get the base64-encoded image
  const dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

Es ist jedoch wichtig zu beachten, dass diese Methode nur für Bilder aus derselben Domain wie die Seite funktioniert. Alternativ können Sie das Attribut „crossOrigin="anonymous"“ im Bild-Tag angeben und sicherstellen, dass der Server CORS unterstützt.

Beachten Sie, dass diese Methode eine neu codierte Version des Bildes und nicht der Originaldatei bereitstellt. Um ein identisches Ergebnis zu erzielen, sollten Sie andere Methoden wie Kaiidos Antwort in Betracht ziehen.

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