2007年02月28日

Ajax:画像を取得して表示する(Firefox)

XMLHttpRequest を使って取得したバイナリーデータ(画像)をブラウザに表示してみました。firefox のみ。
JavaScriptでバイナリを扱う &
 XPCOMを使ってローカルのデータベースにアクセス with Firefox

の記事を読んでいて、そういや Ajax ではどうなん?と思ってやってみた。

■ 他に参考にしたのは以下の記事。
[comp]JavaScriptでバイナリファイルの中身にアクセスできた

■ base64 エンコードには下記のコードを使いました。
JavaScript で Base64 の符号化と復号化

 サンプル


サンプルの画像は元々がちっちゃいので拡大してます。(使いまわしてるので)

 ソースコード

<html><head>
<script type="text/javascript" src="base64.js"></script>
<script type="text/javascript">
load_url = function(url) {
  var req = new XMLHttpRequest();
  req.open('GET',url,false);
  // XHR binary charset opt by Marcus Granado 2006
  // [http://mgran.blogspot.com]
  req.overrideMimeType('text/plain; charset=x-user-defined');
  req.send(null);
  if (req.status != 200) return '';
  return req.responseText;
}

write_binary_file = function(url) {
  // 49 => "1" (decimal)
  var filestream = load_url(url);
  var bytes = [];
  for (i = 0; i < filestream.length; i++)
  bytes[i] = filestream.charCodeAt(i) & 0xff;
  // 改造
  var ele = document.createElement('img');
  ele.src = 'data:image/gif;base64,' +
    base64.encode(String.fromCharCode.apply(String, bytes));
  document.getElementById('testBinery').appendChild(ele);
}
</script></head>
<body>
  <input type="button" value="読み込み" onclick="write_binary_file('画像URL')">
  <div id=testBinery style="margin:15px"></div>
</body></html>


 結局のところ

[comp]JavaScriptでバイナリファイルの中身にアクセスできた
で参考にさせてもらったスクリプトをちょこっといじっただけです。

実際のところ、バイナリーデータであっても responseText で取得できるんですが、ただ、そのまま使うと化けてしまうんですね。
始めは、置換したり削ったりと試行錯誤してましたが、諦めかけた頃この記事を見つけまして・・・。非常にラッキーでした。

んで、どうやって解決しているかというと overrideMimeType です。こいつで強制的に指定してやれば良かったわけです。なーんだ。です。

ちなみにこちらを使うと cgi での base64 の変換がわかる。
[JavaScript] dataスキームURI生成(画像データのBase64変換)
ここ、いろんなツールがあって助かります。

取得したデータに対して先の javascript での base64 エンコードと比較すると面白いです。overrideMimeType で綺麗に一致します。


posted by HiFa at 02:44 | 🌁 | Comment(0) | TrackBack(2) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする
>>> スパムコメントは消してますよん。 お互い無駄な労力は避けましょう。 <<<

この記事へのコメント

コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック


Excerpt: 画像アップロード 画像をアップロードする機会というのは結構あると思う。 その際、選択した画像を表示して確認しながらアップロードしたいと思うのはごく自然なことだが、それがなかなかうまくいかない。 ..
Weblog: jumble
Tracked: 2010-05-01 23:58

電子書籍 epub:1日はまって、また助けてもらって画像ハンドリング完了 ・・・ 【epub viewer を創ろ #5】
Excerpt:  電子書籍 epub viewer。今日はお休みなのだけど、 1日中、画像のハンドリングで悩んで・・・ 頭から離れなかった。 でもやっぱり助けてくれるブログもあって・・・ ハンドリング完了。 ..
Weblog: 創るmetaboy
Tracked: 2011-11-24 01:24