Comment télécharger une image encodée en base64?

Question

J'ai une image encodée en base64 provenant du serveur pour laquelle je veux forcer le téléchargement via JavaScript. Est-ce possible?

Answer 1

Je ne sais pas si je suis en retard pour répondre à cela, mais je pense que la meilleure solution pourrait être la suivante.

1. Créez un fichier à partir de la chaîne base64

   const convertBase64ToFile = (base64String, fileName) => {
        let arr = base64String.split(',');
        let mime = arr[0].match(/:(.*?);/)[1];
        let bstr = atob(arr[1]);
        let n = bstr.length;
        let uint8Array = new Uint8Array(n);
        while (n--) {
           uint8Array[n] = bstr.charCodeAt(n);
        }
        let file = new File([uint8Array], fileName, { type: mime });
        return file;
   }

2. Installez File Saver depuis npm avec

   npm install file-saver

3. Importez File Saver

   const { saveAs } = require('file-saver');
   /// OU 
   import { saveAs } from 'file-saver';

4. En utilisant File Saver, téléchargez le fichier

   const downloadBase64Data = (base64String, fileName) => {
        let file = convertBase64ToFile(base64String, fileName);
        saveAs(file, fileName);
   }

Si cette réponse a fonctionné pour vous, veuillez la mettre en favori et la marquer comme correcte pour aider les autres à la trouver plus facilement

Answer 2

Vous pouvez essayer ceci :

        Télécharger un fichier texte en mode DataURL

            body{ font: menu; }

        Télécharger un fichier texte en mode DataURL

            download("data:application/octet-stream;base64,VOTRE BASE64URL", "dlDataUrlText.jpeg", "application/octet-stream;base64");

La balise de téléchargement télécharge l'image en utilisant le script inclus.

Pour référence, vous pouvez essayer cette URL : http://danml.com/download.html

Answer 3

Dans mon application React, je récupérais les images en base 64 depuis une API, je les ai stockées dans une propriété globale et les ai téléchargées à l'aide de la balise .

[Cliquez pour télécharger l'image]({`data:application/octet-stream;base64,${this.props.base64image}`})

Answer 4

Si vous l'avez déjà en base64, ajoutez la balise d'image devant le base64. attachez-le à l'élément

png64 = "data:image/" + png64; 
$('#downloadPNG').attr('href', png64);

Ajoutez le nom de fichier que vous souhaitez lors du téléchargement à la balise download.

Exporter img

Answer 5

Tout d'abord : Cette question dépend énormément du navigateur ! J'en ai essayé plusieurs, donc j'ai trouvé la réponse à cette question de cette manière :

Vous devez mettre les données en base64 à l'intérieur de la balise src d'un élément IMG : Comment afficher des images en base64 dans HTML ? Ensuite, vous pouvez faire un clic droit sur l'image et cliquer sur "Enregistrer l'image..." (ou similaire) dans ces navigateurs :

• Chrome 79
• Edge 44
• Firefox 71
• IE 11
• Safari 13

Aussi sur Android avec Chrome et Firefox. Le plus gros fichier fonctionnait était un fichier PNG de 23 Mo dans IE 11 et Safari 13. Mais Firefox et Chrome ont aussi fonctionné pour un fichier JPEG de 86 Mo.