Comment convertir une URL d'image en Base64 à l'aide de l'élément Canvas ?

Comment convertir une URL d'image en Base64

Dans un scénario où vous devez acquérir l'URL d'une image et l'utiliser pour le stockage ou un traitement ultérieur, en la convertissant en un La représentation Base64 devient cruciale. Explorons une méthode efficace pour réaliser cette conversion :

Utilisation de l'élément Canvas

Cette approche s'appuie sur l'élément HTML5 canvas, qui est largement pris en charge et permet la manipulation du canevas en JavaScript :

<code class="html"><img id="imageid" src="https://example.com/image.jpg"></code>

<code class="javascript">// Created by Md. Hasan Mahmud
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|jpeg|svg)*;base64,/, "");
}

var base64Image = getBase64Image(document.getElementById("imageid"));</code>

En tirant parti de canvas.toDataURL(), l'image est dessinée sur le canevas et ses données sont converties en une chaîne Base64. La chaîne résultante contient les données de l'image, préfixées par un type MIME.

Dans notre code, nous affinons la chaîne Base64 en utilisant la méthode replace avec une expression régulière qui supprime le type MIME et ",":

<code class="javascript">var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg|jpeg|svg)*;base64,/, "");</code>

Cela nous permet d'obtenir une chaîne Base64 pure, prête à toutes fins dont vous pourriez avoir besoin, comme l'envoyer à un service Web ou la stocker localement.

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!