電子書籍 epub：1日はまって、また助けてもらって画像ハンドリング完了 ･･･ 【epub viewer を創ろ #5】
2011-11-24
電子書籍 epub viewer。今日はお休みなのだけど、１日中、画像のハンドリングで悩んで・・・
頭から離れなかった。
でもやっぱり助けてくれるブログもあって・・・
ハンドリング完了。
これで先に進めるはず。
表紙カバーを表示。
なんか絵があると嬉しいなぁ・・・・・
詳しくは、追記に ▼
************************************************
◎ 画像ハンドリング完了
：epub viewer を創ろ
************************************************
◆最初は単純に・・・
XMLファイルデータを扱うのと同じように、やってたから
バカでしたねぇ。当然、zip圧縮から解凍されたデータは
・画像はそのままバイナリデータでした。
となると、課題は
「画像（バイナリデータ）を、javascript で どのように扱い画面に表示させるか」
でした。
色々と調べましたが、やはりネットの先達に助けられました。
◆基本の仕組みは、dataスキーム形式で表示させること
もちろん対応ブラウザの課題はあるけれど、これでゆく。
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/4Q98RXhpZgAATU0AKgAAAAgABwESAAMAAAA・・・（略）・・・AAAagEoAAMAAAABAAIAAAExAAIAAAAUAAAA" style="width: 400px;">
◆content_typeはファイル名拡張子から得て・・・
function getContentTypeByFilename(strfilename){
var filenames = String(strfilename).split(".");
var ext = filenames[1];
var types = {
jpg : "image/jpeg",
png : "image/png",
txt : "text/plain",
html : "text/html"
};
return types[ext];
}◆xmlデータのときと同じように（先回ご参照）
zip.js利用して対象ファイルを解凍し
if(cover){
var url = thisdirdata+'/Images/'+cover;
var objdata = zip.files[url].inflate();
var ele = document.createElement('img');
ele.src = "data:"+content_type+";base64," + base64.encode(objdata);
ele.style.width = "400px";
document.getElementById('imgView').appendChild(ele);
}の文字列をつくってゆく。
◆base64のエンコードは次でご提供いただいているライブラリを利用させてもらった。感謝。
さて、次は、目次のリンク部分の処理とメインビューとの連携。
まずます楽しくなってきました。
