Posted at

HTML5+javascriptでEPUB3を作成する(画像読み込み編)

More than 1 year has passed since last update.

「HTML5+javascriptを使ってブラウザでEPUB3を作成する」の記事では、概略として簡略的にかいていたのを詳細に書いてみようと思う。

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