Heim > Web-Frontend > js-Tutorial > Wie kann ich mit JavaScript die Base64-Daten-URL eines Bildes abrufen?

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

DDD
Freigeben: 2024-12-15 22:12:16
Original
517 Leute haben es durchsucht

How Can I Get an Image's Base64 Data URL Using JavaScript?

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,/, "");
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage