人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptで変数に入った画像のバイナリデータを表示したいと思っています。

画像のバイナリデータは
http://developer.mozilla.org/en/docs/Storage
を使って、ローカルのsqliteのDBから画像データを取得しています。

そのデータをbase64でエンコードして、(それをthe_data とする)
img.src = 'data:image/jpeg;base64,' + the_data;

のようにして、画像を表示させたいと思っています。

javascriptでこのようなことは可能でしょうか?
というか、うまくいかないので、教えてください。

perlでは以下でできました。

---
use DBI;
use MIME::Base64;

my $dbh = DBI->connect('dbi:SQLite:dbname=test.db','','') || die;
my $sth = $dbh->prepare('SELECT image_data FROM jpeg_data_table where id = 1') || die;
$sth->execute() || die;
my $row = $sth->fetchrow_arrayref() || die;
my $str = $row->[0];
(my $ec = encode_base64($str)) =~ s/\n//g;
print $ec;
---

イメージとしては以下のようにすると、
<img src='data:image/jpeg;base64,$ec'>

そのhtmlに画像が表示できました。

●質問者: mogwaing
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:.DB base64 CONNECT dB DBI
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● llusall
●35ポイント

例えば、gifですが次のようになるかと思います。

JavaScript の変数に入ったbase64の画像を表示させます。

<html>

<body>

<img id="icon_here"><br>

<input type="button" name="ok" onclick="test();" value="ok" >

</body>

</html>

<script language="JavaScript">

<!--

function test(){

var data = 'data:image/gif;base64,'+

    'R0lGODlhFAAUAPfLAP/9ev6BHv/ghf/4dv/ycP51Ff/cXv/79//////iZP/qams0O9ZSIK1KK/6z'+

    'deJqJoJPU9eYa91cJv7lqvZwHtJgNctQKP6DFddTI6U5K3ZBPv7Ee+10KMNLKP6MFeJeHl02QOxw'+

    'Hv/fYPu1fv7mqOpqIPW4jPize/W6jv6UQP50Ff6fO75pUXNLS/6aGBoSJtKsxP5wGPFlGP7iqf7M'+

    'rvNiHv60c/59Hu2zhv56HslUK/7TjfVuGPhzNv7w4eduKMtjMP6IINdUHstZG/6vZp5AN/7LublV'+

    'LrxLLslQJsdgQf7ev/7iof7Xuf7WtPuia/60W7N4Yf6VHvtsGP7GjP7j0f7t3P7EluqGO+plHv54'+

    'FddhKL5YNv7Uqd9jHt2LVv6DHueKYf7Hof7VnPu+jv7NqepiJt1cKPO6hv6FFf6YFf7Hnvi7kf7j'+

    'zOVpJtZXI9dVGPZ0Hv/x56A3MMRPLvNpFfBuHuduLp00Lvt1KPt3HsxZK+WIRv6ORv6YO8lPKP6H'+

    'Hv54GP6FKP5+ENNQJvCFMMtrP7xPI7VLKP7jxP7Plva7kdZVI/7p120+Rv6UFf7dwa9CMNFgM/66'+

    'fv6dHvidad9uM/56FehiJmcyO/7jybNHK61NLupzJvB0JvVuFf6uYu10Jv7EVvZlGDwrQ/6LEPaK'+

    'SOdlIN1pKL5GHs9ZI/6rHmdKUcSZmf6GFf64hvF1KN9rOP/9nNlbJsNXNv7Hmd9uKNxVIFQuQ/yA'+

    'IN9gKP7zue2dafGrcf5zFeyOUdlsLvF0IN1bKPhlFfW7jP50Lu1sJv7dj/bJS///e9efU////wAA'+

    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+

    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+

    'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAMsALAAAAAAUABQA'+

    'AAj/AJcJHEiwoMGDCBMqPKisYcOFA5Ulm5hMhDKIEpFpRAZBVR9iZMSUWcMGTS9BJ0xk3Lhgi50n'+

    'XSA1auMExS89vHBkdOgIyA9Mr6r4OBBGUpY4tFhIVCZLgIAofNzICJSnWI9hBQZdQoJnKQADBhYR'+

    '6aTCV5oLBSi50uJhzxyvCRI0ofKpTo0cLh5JoTAqBo9IXhUokJNIl5BDGjio8QKiwa0PdLwSIIDA'+

    'CpcknHChWlUi05FTf854HTDgQKVUsALAgSKq1JQbgDCYWeawoaZYDB6ESIHAiB8wuYIxEmawlo5Z'+

    'oYbQgEGqBRZgniQQMjhpU4cAhZa0esHqi60AxiwYJbSBKIMpJjMURRixYUUQS28MXjFURImDMROO'+

    '7SCxC1SFOxAhFBAAOw==';

    var icon_elem = document.getElementById("icon_here");

    icon_elem.src = data;

    alert("表示完了!");

}

// -->

</script>

※参考 Kawa.netxp [JavaScript] dataスキームURI生成(画像データのBase64変換)

http://www.kawa.net/works/js/data-scheme/base64.html

※FireFox1.5は動作しましたが、IE6は駄目でした。

◎質問者からの返答

すいません、説明不足でした。

直接、base64でエンコードした文字列を指定すると表示されるのはわかるのです。上のperlの例がそれを意味していました。

sqliteのDBに格納されてるのは、jpegの画像データ(バイナリ)なので、それをbase64エンコードして表示したいのです。

firefoxのsqliteを使って、javascriptで画像のデータをselectして、それをbase64でエンコードして、上記のようにしたいのですが、画像のデータを格納する部分? らへんでデータがおかしくなって画像として表示されません。(ちゃんとデータがとれて無いのかもしれません。)

わかりますでしょうか?


2 ● yazawa78jp
●35ポイント

JavaScriptでbase64エンコードをしたい、という質問でしょうか?

それなら、

JavaScript Base64でGoogle検索をすれば、ライブラリを

提供してくれているページがいくつか見つかります。

例えば、

http://user1.matsumoto.ne.jp/~goma/js/base64.html

とか。

そんなに難しいものでもないので、自作されてもいいかと

思いますが。

◎質問者からの返答

すいません、質問が中途半端で。

base64のエンコード方法はわかります。firefox内部にも変換関数があります。

sqliteのblog型としてjpegのデータが格納されているのですが、

それをgetBlobという関数で取得します。

var size = {};

var data = {};

stmt.getBlob(0, size, data);

のようにして取得しているのですが、

結果のdata.valueをbase64でエンコードしても、画像のデータが表示されません。

結果の取得の仕方が悪いのか、それを変数に格納してる時に変換されてしまっているのかよくわかりません。

(javascriptって変数にバイナリデータをそのまま格納できるのでしょうか?)

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ