Télécharger plusieurs images dans 1 fichier zip

J'ai une fonction qui actuellement téléchargements multiples images et les enregistre dans les utilisateurs "télécharger" le dossier (ne fonctionne que sur Chrome)

Je veux profiter de cette fonction pour l'étape suivante et de mettre ces images dans un seul fichier zip.

Ci-dessous est un exemple de mon code actuel. Je veux fusionner mon code avec le JSZip API j'ai trouvé en ligne ici.

J'ai fait la charmille installer pour ce JSZip API et déjà inclus le script dans mon code html.

Voici mon code qui fonctionne parfaitement de télécharger plusieurs images à 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 le JSZip API exemple de code pour créer un fichier zip avec le 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 juste comment combiner les deux pour mettre mes images dans un zipfile.
Merci pour votre aide!

Il ressemble parce que j'ai l'url de l'image tirant à partir de amazonS3, je n'ai pas stockées dans un endroit qui est accessible à ng-src est le chargement de ces photos. J'ai donc besoin de comprendre comment obtenir les données à partir de ng-src si possible, puis exécutez le code postal. Est-il possible d'obtenir des données à partir de ng-src dans ma fonction?

OriginalL'auteur Jason Brewer | 2015-08-03

  1. 3

    Pour Télécharger plusieurs fichiers au format Zip, nous pouvons utiliser jsZip et FileSaver.js ou si nous sommes à l'aide de l'API Web et Angularjs alors nous pouvons créer une méthode de l'API pour créer des zip obtenir le fichier au serveur, puis dans angularjs on peut utiliser $http post ou get 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 -

    les appels de l'api dans angularjs -

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

    appel de fonction ci-dessus et sur la réponse de l'utilisation fileSaver.js la méthode enregistrer sous 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
    });

    OriginalL'auteur Ravindra Vairagi

  2. 2

    Vous devriez voir cet exemple. Actuellement, vous demandez simplement le navigateur pour déclencher le téléchargement d'un fichier. Si vous souhaitez créer un fichier zip côté client, votre code js a besoin d'accéder au contenu des fichiers avec des appels ajax (vous obtiendrez de la SCRO questions si elles ne sont pas stockées sur le même serveur).

    Sans copier/coller tout le code, exemple:

    • déclenche des appels ajax (avec JSZipUtils mais vous pouvez facilement utiliser uniquement un responseType = "arraybuffer" si tu prend uniquement en charge les navigateurs récents)
    • les envelopper dans des promesses (jQuery promesses ici, mais vous pouvez utiliser votre propre)
    • ajouter le résultat dans un zip objet
    • attendre que toutes les promesses à remplir avant de déclencher un téléchargement

    OriginalL'auteur David Duponchel

  3. 2
    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");
             });

        }

    }
    JSZIP bibliothèque que j'ai utilisé est :- github.com/Stuk/jszip/zipball/master
    a fait un bon travail!

    OriginalL'auteur Vic Key

  4. 2

    J'ai mis cet ensemble qui vous permettra de zip un tableau de l'url de l'image.

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

    Vous pouvez gérer le dossier zip structure en modifiant cette ligne

    filename = filename.replace(/[\/\*\|\:\<\>\?\"\\]/gi, '').replace("httpsi.imgur.com","");

    OriginalL'auteur Jaitsujin