「HTML5+javascriptを使ってブラウザでEPUB３を作成する」の記事では、概略として簡略的にかいていたのを詳細に書いてみようと思う。
第2回目
画像ファイルの扱い
画像ファイルを読み込みzipファイルに保存する。
画像ファイルの読み込みには、fileapiを利用して読み込む方法がある。fileapiで読み込みBASE64に変換を行う。acceptを用いてjpegファイルとpngファイルの読み込みだけに制限している。
<input type='file' accept='image/jpeg,image/png' id="imgfile">
JavaScriptで画像データは、Base64であつかう。
ファイル名とデータの関係、例えば画像ファイルとファイル名では別々に扱うので、
Base64でjpeg画像は次のテキストで始まる。
data:image/jpeg;base64,
この始まりの部分をカットしないとjszipでzipファイルにして保存ができない。
参考
https://github.com/Stuk/jszip/issues/151
.split('base64,')をすることでカットした。{base64: true}はbase64用の設定である。
zip.file("sample.jpg", reader.result.split('base64,')[1], {base64: true});