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('画像ＵＲＬ')">
<div id=testBinery style="margin:15px"></div>
</body></html>
<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('画像ＵＲＬ')">
<div id=testBinery style="margin:15px"></div>
</body></html>
結局のところ
[comp]JavaScriptでバイナリファイルの中身にアクセスできた
で参考にさせてもらったスクリプトをちょこっといじっただけです。
実際のところ、バイナリーデータであっても responseText で取得できるんですが、ただ、そのまま使うと化けてしまうんですね。
始めは、置換したり削ったりと試行錯誤してましたが、諦めかけた頃この記事を見つけまして・・・。非常にラッキーでした。
んで、どうやって解決しているかというと overrideMimeType です。こいつで強制的に指定してやれば良かったわけです。なーんだ。です。
ちなみにこちらを使うと cgi での base64 の変換がわかる。
[JavaScript] dataスキームURI生成（画像データのBase64変換）
ここ、いろんなツールがあって助かります。
取得したデータに対して先の javascript での base64 エンコードと比較すると面白いです。overrideMimeType で綺麗に一致します。
この記事へのコメント