web-dev-qa-db-fra.com

Téléchargez plusieurs images dans 1 fichier Zip

J'ai une fonction qui télécharge actuellement plusieurs images et les enregistre dans le dossier de téléchargement des utilisateurs (ne fonctionne que dans Chrome)

Je veux prendre cette fonction à l'étape suivante et mettre ces images dans un seul fichier Zip.

Voici un exemple de mon code actuel. Je veux fusionner mon code avec l'API JSZip que j'ai trouvée en ligne ici .

J'ai déjà fait l'installation de Bower pour cette API JSZip et inclus le script dans mon html.

Voici mon code qui fonctionne parfaitement en téléchargeant plusieurs images SINGLE à la fois:

$scope.downloadPhotos = function() {
    var photoUrls = [];
    for (var x = 0; x < $scope.$parent.photos.length; x++) {

        var p = $scope.$parent.photos[x];
        if (p.isChecked) {
            photoUrls.Push($scope.bucketUrl() + p.photoUrl);

        }
    }

    saveImage(photoUrls);
};



/*----this function  saveImage works great (only Chrome)-----*/
    function saveImage(urls) {
        var link = document.createElement('a');

        link.setAttribute('download', null);
        link.style.display = 'none';


        document.body.appendChild(link);

        for (var i = 0; i < urls.length; i++) {
            link.setAttribute('href', urls[i]);
            link.click();
        }

        document.body.removeChild(link);
    }

Et voici l'exemple de code API JSZip pour créer un fichier Zip avec du contenu:

function create_Zip() {
    var Zip = new JSZip();
    Zip.add("hello1.txt", "Hello First World\n");
    Zip.add("hello2.txt", "Hello Second World\n");
    content = Zip.generate();
    location.href = "data:application/Zip;base64," + content;
}

Maintenant, je me demande simplement comment combiner les deux pour mettre mes images dans un fichier zip. Merci de votre aide!

javascriptangularjsimagedownloadzipfile
13
Jason Brewer

Pour télécharger plusieurs fichiers au format Zip, nous pouvons utiliser jsZip et FileSaver.js ou si nous utilisons Web API et Angularjs, nous pouvons créer une méthode API pour créer un fichier d'archive Zip sur le serveur, puis dans angularjs, nous pouvons utiliser $ http post ou obtenir appel api pour télécharger le fichier en tant que fichier Zip (Nous devons utiliser filesaver pour enregistrer le fichier au format Zip). par exemple -

appel api dans angularjs -

function downloadFiles(files) {
            return $http.post(baseUrl + 'api/download/files', files, { responseType: 'arraybuffer' });
        }

appeler la fonction ci-dessus et sur la réponse utiliser la méthode fileSaver.js saveAs pour enregistrer le fichier au format Zip par exemple -

//files - array input of files like http://www.example.com/file1.png', 'http://www.example.com/file2.jpeg', 'http://www.example.com/file3.jpg'];

    downloadFiles(files).then(function (response) {
        //on success
        var file = new Blob([response.data], { type: 'application/Zip' });
        saveAs(file, 'example.Zip');
    }, function (error) {
        //on error
        //write your code to handle error
    });
4
Ravindra Vairagi

J'ai mis cela ensemble qui vous permettra de compresser un tableau d'URL d'image.

https://jsfiddle.net/jaitsujin/zrdgsjht/

Vous pouvez gérer la structure du dossier Zip en modifiant cette ligne

filename = filename.replace(/[\/\*\|\:\<\>\?\"\\]/gi, '').replace("httpsi.imgur.com","");
4
Jaitsujin
function downloadImageAsZip(imageUrl){
        var Zip = new JSZip();
        var img = new Image();
        img.crossOrigin = 'Anonymous';
        img.src = imageUrl;
        img.onload = function() {
        $scope.count2++;

        var canvas = document.createElement('CANVAS');
        var ctx = canvas.getContext('2d');
        var dataURL;
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(this, 0, 0);
        ctx.enabled = false;
        dataURL = canvas.toDataURL("Canvas");
        canvas = null;
        //var base64String = dataURL.replace("/^data:image\/(png|jpg);base64,/", "");
        var base64String = dataURL.replace("data:image/png;base64,", "");
            Zip.file("ImageName", base64String, {base64: true});

             Zip.generateAsync({type:"blob"}).then(function(content) {
                        saveAs(content, "ZipFileName.Zip");
             });

        }

    }
2
Vic Key

Vous devriez voir cet exemple . Actuellement, il vous suffit de demander au navigateur de déclencher le téléchargement d'un fichier. Si vous souhaitez créer un côté client de fichier Zip, votre code js doit accéder au contenu des fichiers avec des appels ajax (vous obtiendrez des problèmes CORS s'ils ne sont pas stockés sur le même serveur).

Sans copier/coller tout le code, l'exemple:

  • déclenche des appels ajax (avec JSZipUtils mais vous ne pouvez facilement utiliser qu'un responseType = "arraybuffer" si vous ne supportez que les navigateurs récents)
  • les envelopper dans des promesses (jQuery promet ici mais vous pouvez utiliser les vôtres)
  • ajouter le résultat dans un objet Zip
  • attendez que toutes les promesses se terminent avant de déclencher un téléchargement
2
David Duponchel