Help us understand the problem. What is going on with this article?

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});
99nyorituryo
電子書籍に関する技術書を出してます。https://www.amazon.co.jp/-/e/B07Q2TZFCN
http://99nyorituryo.hatenablog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away