Comment convertir une URL d'image en Base64 à l'aide de Javascript ?

Conversion d'une URL d'image en Base64

Dans les scénarios de développement Web, il est souvent nécessaire d'envoyer des images pour traitement ou stockage sans avoir accès au fichier image réel. Pour faciliter cela, nous pouvons convertir les URL des images au format Base64, permettant une transmission efficace.

Dans votre cas spécifique, vous disposez de l'URL d'une image (par exemple, " https://example.com/image. png") obtenu à partir de la saisie d'un utilisateur. Pour le convertir en Base64 à l'aide de JavaScript :

1. Créez un nouvel élément d'image : Cet élément d'image servira de représentation temporaire de l'image pour le traitement.

<code class="javascript">const img = new Image();
img.src = imageUrl; // Replace imageUrl with the URL you obtained</code>

2. Dessinez l'image sur une toile : Cette étape crée une copie parfaite au pixel près de l'image sur la toile.

<code class="javascript">const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);</code>

3. Convertir le canevas en Base64 : Utilisez la méthode toDataURL() pour convertir le canevas en une chaîne codée en Base64.

<code class="javascript">const base64Image = canvas.toDataURL("image/png");</code>

4. Supprimez le Préfixe URI de données : La méthode toDataURL() renvoie un URI de données qui inclut des informations supplémentaires. Supprimez le préfixe avec une expression régulière pour obtenir les données Base64 pures.

<code class="javascript">const regex = /^data:image\/[A-z]*;base64,/;
const base64Data = base64Image.replace(regex, "");</code>

Maintenant, base64Data contient la représentation codée en Base64 de l'image. Vous pouvez transférer cette chaîne vers votre service Web pour un traitement ultérieur ou l'enregistrer localement sur votre système.

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!