Comment puis-je obtenir l'URL des données Base64 d'une image à l'aide de JavaScript ?

Comment récupérer l'URL des données d'image à l'aide de JavaScript

Dans le développement Web, il est souvent utile d'accéder au contenu des images sur une page Web. Ceci peut être réalisé grâce à JavaScript, permettant aux développeurs de manipuler et d'utiliser les données d'image sans avoir à les télécharger séparément.

L'un de ces cas d'utilisation consiste à obtenir la représentation codée en base64 des images déjà chargées par le navigateur. Ceci est particulièrement utile lorsque vous travaillez avec des scripts Greasemonkey dans Mozilla Firefox.

Pour obtenir l'URL des données de l'image, un élément canevas est utilisé. Voici le code que vous pouvez utiliser :

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,/, "");
}

Cependant, il est important de noter que cette méthode ne fonctionne que pour les images du même domaine que la page. Vous pouvez également spécifier l'attribut crossOrigin="anonymous" sur la balise d'image et vous assurer que le serveur prend en charge CORS.

N'oubliez pas que cette méthode fournit une version réencodée de l'image, et non le fichier original. Pour un résultat identique, pensez à utiliser d'autres méthodes comme la réponse de Kaiido.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!