JSだけで複数のbase64データを画像化しZIPでダウンロード

こんにちは。

今回は、複数のbase64データを画像化して、ZIPで圧縮してダウンロードする機能を実装します。

まず使うライブラリは以下２つです。

• JSZip
• FileSaver

JSzipを読み込む

公式サイト：https://stuk.github.io/jszip/

Installationに書いてある通りインストールします。
npm版も用意されているようです。
HTMLで読み込む場合は、Manuallyの所の「download JSZip」からダウンロードして読み込みましょう。ダウンロードしたフォルダのdist/jszip.min.jsを読み込めば使えます。

FileSaverを読み込む

FileSaverのGithub：https://github.com/eligrey/FileSaver.js/

HTML読み込みの場合はGithubからダウンロードして使いましょう。
dist/FileSaver.min.jsを読み込めば使えます。

その他の方法でインストールする場合は、Githubの一番下にInstallationをみてインストールしてください。

ダウンロード処理を実装

      var images = [];  // この配列にbase64のデータを入れる

      function downloadImages(images){
        let zip = new JsZip();
        for(var i=0; i < this.images.length; i++){
          zip.file('img'+[i]+'.png', images[i].split(',')[1], {base64: true});
        }
        zip.generateAsync({type: 'blob'})
        .then(function(content){
          FileSaver.saveAs(content, 'images.zip');
        });
      }

基本的な使い方は、

zip.file(画像ファイル名, base64データ, {base64: true})

の形式で記述します。

今回はデータが複数あるので配列にし、for文でループさせてデータの数だけ処理しています。
注意点として、base64データは、「,(コンマ)」より右側のデータのみを使用しないとエラーが起こります。
そのため、split()で分割し、右側のデータのみを格納しています。