画像のバイナリデータは
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に画像が表示できました。
No.1
505
61
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は駄目でした。
No.2
10
35pt
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って変数にバイナリデータをそのまま格納できるのでしょうか？)
llusall
2007/02/19 11:58:16
7
6
HiFa
すいません、説明不足でした。
直接、base64でエンコードした文字列を指定すると表示されるのはわかるのです。上のperlの例がそれを意味していました。
sqliteのDBに格納されてるのは、jpegの画像データ(バイナリ)なので、それをbase64エンコードして表示したいのです。
firefoxのsqliteを使って、javascriptで画像のデータをselectして、それをbase64でエンコードして、上記のようにしたいのですが、画像のデータを格納する部分? らへんでデータがおかしくなって画像として表示されません。(ちゃんとデータがとれて無いのかもしれません。)
わかりますでしょうか？