Exemples de conversion entre chaînes base64 et images

1. Le principe de la conversion d'une chaîne base64 en image est que lorsque la chaîne base64 est utilisée comme attribut src de la balise img, si elle est valide, elle peut être prévisualisée. Si vous souhaitez télécharger, créez une nouvelle balise a, définissez l'attribut href de la balise a sur la chaîne base64, définissez l'attribut de téléchargement de la balise a sur le nom de fichier, puis déclenchez manuellement l'événement de clic de la balise a via js, le comportement de téléchargement est alors terminé. (Selon le navigateur, vous devrez peut-être sélectionner le répertoire de téléchargement ou utiliser le répertoire par défaut).

2. Convertir les images en chaîne base64

Il existe deux types, l'un consiste à fournir la balise src de l'image et l'autre à télécharger le fichier image.

3. Fournissez la balise src de l'image

doit être complétée à l'aide de la balise canvas.
L'avantage est que... pouvez-vous zoomer sur l'image ?

L'inconvénient est qu'il ne peut pas traverser de domaine (mais l'autre non plus)

La séquence est la suivante :
1 L'utilisateur fournit src
Créez un. nouvelle balise img et définissez le src. Donnez la balise img
3. Une fois la balise img chargée (le rappel onload est déclenché), continuez à exécuter le code suivant :
4. , vous pouvez définir la taille du canevas en fonction de la taille de l'image, ou laisser l'image Taille du canevas adaptative)
5. Obtenez la chaîne base64 via la méthode toDataURL de canvas
6. >
4. Le formulaire de téléchargement de fichier
nécessite que la balise d'entrée prenne en charge le type =file, vous devez utiliser l'objet FileReader
L'avantage est qu'il convertit automatiquement le fichier après l'avoir sélectionné, ce qui simplifie l'opération.
La séquence est la suivante :
1. Lorsque la balise d'entrée de type=file déclenche l'événement onchange, commencez à exécuter les instructions suivantes
2 Créez un nouvel objet FileReader ; readAsDataURL API , lisez le contenu du fichier ;
4. Lorsque la lecture est réussie (la fonction de rappel onload est déclenchée), vous pouvez utiliser le paramètre e de la fonction de rappel pour obtenir la chaîne base64 en utilisant l'attribut e.target.result. ;
5. La chaîne base64 est ce qui est nécessaire.

5. Page DEMO :

Convertir l'image en chaîne base64

Convertir la chaîne base64 en image

Recommandations associées :

Code PHP pour convertir des images en chaînes base64

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!