読者です 読者をやめる 読者になる 読者になる

Akihiro's Programmer Blog

Technology Notes for Personal

JavaScriptのみでzipファイルを生成する -3

JavaScript HTML5

一先ずこれで一段落。



変更点

大きな変更点は4つ。

  1. ローカルファイルもフォルダ指定が可能に
  2. 追加できるローカルファイルの種類増加
  3. canvas要素を画像ファイルとして追加可能に
  4. zip生成処理並列化




もともとやりたい事が別にあったのだけれど、それの一機能として作り始めたのがこのライブラリ。

想定していた所までは出来たと思われるため、今回で大きなアップデートは無くなるかと。


ということで

バージョンは3.0.0に。
まだ確認できていないファイル形式もあると思われる。

ライブラリ名 Zipper.js (ver 3.0.0)
対応ブラウザ forefox,chrome
機能 ファイルやフォルダを作って、まとめてzipでダウンロード
対応ファイル形式 テキスト(txt,js,docx等)、画像(png,jpg等)、音声(mp3,wav等)、動画(mp4,flv等)


使い方

内容は大きく変化したが、使い方は変わらず。
ユーザにしわ寄せを与えないのがモットー。

  • ローカルファイルを入れるフォルダが指定可能に
zipper.file("folderName/", files);  //第1引数にフォルダ、第2引数にFileListを指定


  • canvas要素を突っ込めば、画像ファイルとして生成可能
var canvas = document.getElementById("canvas");  //canvas要素を取得して

zipper.file(canvas); //これでOK、ファイル名はnonameがデフォルト(形式はpng)

zipper.file("folderName/", canvas);  //フォルダ指定も可能で

zipper.file("folderName/fileName.png", canvas);  //png形式

zipper.file("folderName/fileName.jpg", canvas);  //jpeg形式で生成可能


zipper.compress = true;  //trueでdeflate圧縮、falseで無圧縮

※デフォルトは無圧縮だが、deflate圧縮は安定しないため推奨しない。




こちらに置いておきます。低品質ですが無料です。
(追記 2014/04/10)現在公開しておりません。

最後に

大きなファイルを突っ込むとブラウザがクラッシュする可能性があるため注意。

ただ、想定していた機能まではたどり着いたため非常に満足。


後は細かいバージョンアップがあるかないかぐらいかなと。

今考えているのは、zip生成の進捗状態をパーセンテージで取得できたりしたら便利かもとか。