top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_1362

電子書籍 epub:1日はまって、また助けてもらって画像ハンドリング完了 ・・・ 【epub viewer を創ろ #5】

 2011-11-24
 電子書籍 epub viewer。今日はお休みなのだけど、
1日中、画像のハンドリングで悩んで・・・
頭から離れなかった。
でもやっぱり助けてくれるブログもあって・・・
ハンドリング完了。
これで先に進めるはず。

表紙カバーを表示。
   電子書籍 epub viewer 表紙カバーを表示 なんか絵があると嬉しいなぁ・・・・・


  詳しくは、追記に  ▼

more

************************************************
◎ 画像ハンドリング完了
              :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);
}
 ・<img src="data:image/jpeg;base64, ・・・
 の文字列をつくってゆく。

base64のエンコードは次でご提供いただいているライブラリを利用させてもらった。感謝。



JavaScript で Base64 の符号化と復号化
JavaScript で Base64 の符号化と復号化 LastModified : 2006/11/8 だけど、今でも十分に役立つ。素晴らしい。

さて、次は、目次のリンク部分の処理とメインビューとの連携。
まずます楽しくなってきました。

commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/1362-c6ee2c94
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。