web-dev-qa-db-ja.com

複数の画像を1つのZipファイルにダウンロード

現在複数の画像をダウンロードしてユーザーの「ダウンロード」フォルダーに保存する機能があります（Chromeでのみ機能します）

この機能を次のステップに進め、これらの画像を単一のZipファイルに入れたいと思います。

以下は私の現在のコードの例です。コードをオンラインで見つけたJSZip APIとマージしたい here 。

このJSZip APIのバウアーインストールはすでに実行しており、スクリプトをHTMLに含めました。

これは、一度に複数のSINGLEイメージを完全にダウンロードするように機能する私のコードです。

$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);
    }

そして、コンテンツが含まれたZipファイルを作成するためのJSZip APIコードの例を次に示します。

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;
}

今、私は2つを組み合わせて私の画像をzipファイルに入れる方法を考えています。ご協力いただきありがとうございます！

javascriptangularjsimagedownloadzipfile
13
Jason Brewer

複数のファイルをZip形式でダウンロードするには、jsZipとFileSaver.jsを使用できます。または、Web APIとAngularjsを使用している場合は、APIメソッドを作成してサーバーでZipアーカイブファイルを作成し、angularjsで$ http postまたはgetを使用できます。 api呼び出しでファイルをZipファイルとしてダウンロードします（ファイルをZip形式で保存するには、filesaverを使用する必要があります）。例えば ​​-

angularjsでのAPI呼び出し-

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

上記の関数を呼び出し、応答時にfileSaver.jsメソッドsaveAsを使用して、たとえばファイルをZip形式で保存します-

//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

これを組み合わせて、画像のURLの配列を圧縮できるようにします。

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

この行を変更して、Zipフォルダー構造を管理できます

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

この例 が表示されます。現在、ブラウザにファイルのダウンロードをトリガーするように要求するだけです。クライアント側でZipファイルを作成する場合、jsコードはajax呼び出しでファイルのコンテンツにアクセスする必要があります（同じサーバーに保存されていない場合、CORSの問題が発生します）。

コード全体をコピー/貼り付けせずに、例：

  • ajax呼び出しをトリガーします（ JSZipUtils を使用しますが、responseType = "arraybuffer"最近のブラウザのみをサポートしている場合）
  • それらをpromiseにラップします（jQuery promiseはここですが、独自のものを使用できます）
  • 結果をZipオブジェクトに追加する
  • すべてのプロミスが完了するのを待ってからダウンロードをトリガーします
2
David Duponchel