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に画像が表示できました。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/02/16 19:38:38
  • 終了:2007/02/19 10:43:46

回答(2件)

id:llusall No.1

llusall回答回数505ベストアンサー獲得回数612007/02/16 20:35:27

ポイント35pt

例えば、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は駄目でした。

id:mogwaing

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

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

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

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

わかりますでしょうか?

2007/02/17 02:04:37
id:yazawa78jp No.2

yazawa78jp回答回数1ベストアンサー獲得回数02007/02/17 17:33:06

ポイント35pt

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

それなら、

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

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

例えば、

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

とか。

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

思いますが。

id:mogwaing

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

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

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

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

var size = {};

var data = {};

stmt.getBlob(0, size, data);

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

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

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

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

2007/02/17 21:56:55
  • id:llusall
    お役に立てず、すみません。
    役立たずついでに
    以下、参考になりますでしょうか?


    JavaScript の文字コード処理に関する覚書
    http://www2.wbs.ne.jp/~kanegon/doc/code.txt

    [抜粋]
    JavaScript ではそれに加えてコード列をバイナリ(バイト配列)として処理することも
    できないため、これが時として非常に不便である。
    ・・・
    - JavaScript によるバイナリデータ操作 (参照)
    JavaScript にはバイナリ操作の機能はなく、上記 ADODB.Stream が返すバイナリデー
    タもオブジェクトの受け渡しはできるものの要素にアクセスすることはできない。
    この ADODB.Stream が返すバイナリデータ(たぶんバイトを要素とするVariant配列)は
    VBScript なら割と素直に扱えるみたいだが、JavaScript の VBArray にも渡そうとし
    ても失敗する。

    ようするに VBScript でアプリケーションを記述すればバイナリ操作(参照のみ)は標準
    の機能で実現可能になるわけだが、個人的に VBScript は好きでないので、なるべく
    JavaScript で書きたいという別の問題もある。
    しかし、できないものはしょうがないので VBScript に処理はさせるが、JavaScript
    側にそのラッパを用意し、VBScript を隠蔽することで問題を回避してみる。
    ・・・
    - JavaScript によるバイナリデータ操作 (データの作成)
    ・・・サンプルあり
  • id:HiFa
    もう解決しちゃったかな。
    http://cheesy.dip.jp/diary/archives/101
    http://d.hatena.ne.jp/k12u/20061216/p1
    が参考になると思います。

    ちなみに、自分とこのブログ(http://zombiebook.seesaa.net/article/34873787.html)で Ajax 的に responsText に返ったバイナリで画像を表示してみました。

    ちょっとだけ宣伝w

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません