前のエントリーの続き。
Firefox前提でIEは無視。他のブラウザでは可能かもしれない。ここまで強引にやる必要があるかどうかは置いておいて、画像データを同期で読み込む方法を見つけたので書いておく。画像を送信先に指定しているのでデータスキームでは「Access to restricted URI denied」(NS_ERROR_DOM_BAD_URI)というエラーになる。動作はFirebugで確認している。
(
function(){
var parseHTTPHeader=function(responseHeader){
var headers=responseHeader.split("\n");
var len=headers.length;
var parsing=[];
for(var i=0;i<len;i++){
if(/^$/.test(headers[i])){
}else if(/^[\x09\x20]/.test(headers[i])){
if(parsing.length==0){
throw "SyntaxError:HTTPHeader (first line) "+headers[i];
}
parsing[parsing.length-1]+="\n"+headers[i];
}else{
parsing.push(headers[i]);
}
}
var len=parsing.length;
var parsed={};
for(var i=0;i<len;i++){
var pair=parsing[i].split(": ",2);
if(pair.length!=2){
throw "SyntaxError:HTTPHeader (format) "+parsing[i];
}
if(pair[0] in parsed){
throw "SyntaxError:HTTPHeader (repetition) "+pair[0];
}
parsed[pair[0]]=pair[1];
}
return parsed;
}
var loadImage=function(url){
var img=new Image();
var xhr=new XMLHttpRequest();
xhr.open("get",url,false);
xhr.overrideMimeType("text/plain; charset=x-user-defined");
xhr.onload=function(){
var headers=parseHTTPHeader(xhr.getAllResponseHeaders());
var contentType=("Content-Type" in headers)?
headers["Content-Type"]:
"application/octet−stream";
var dataScheme="data:"+contentType+
";base64,"+btoa(
xhr.responseText.replace(
/[\u0100-\uffff]/g,
function(c){
return String.fromCharCode(c.charCodeAt(0)&0xff);
}
)
);
img.src=dataScheme;
};
xhr.send("");
return img;
}
var url="http://(略)";
var img=loadImage(url);
document.body.appendChild(img);
}
)();
function(){
var parseHTTPHeader=function(responseHeader){
var headers=responseHeader.split("\n");
var len=headers.length;
var parsing=[];
for(var i=0;i<len;i++){
if(/^$/.test(headers[i])){
}else if(/^[\x09\x20]/.test(headers[i])){
if(parsing.length==0){
throw "SyntaxError:HTTPHeader (first line) "+headers[i];
}
parsing[parsing.length-1]+="\n"+headers[i];
}else{
parsing.push(headers[i]);
}
}
var len=parsing.length;
var parsed={};
for(var i=0;i<len;i++){
var pair=parsing[i].split(": ",2);
if(pair.length!=2){
throw "SyntaxError:HTTPHeader (format) "+parsing[i];
}
if(pair[0] in parsed){
throw "SyntaxError:HTTPHeader (repetition) "+pair[0];
}
parsed[pair[0]]=pair[1];
}
return parsed;
}
var loadImage=function(url){
var img=new Image();
var xhr=new XMLHttpRequest();
xhr.open("get",url,false);
xhr.overrideMimeType("text/plain; charset=x-user-defined");
xhr.onload=function(){
var headers=parseHTTPHeader(xhr.getAllResponseHeaders());
var contentType=("Content-Type" in headers)?
headers["Content-Type"]:
"application/octet−stream";
var dataScheme="data:"+contentType+
";base64,"+btoa(
xhr.responseText.replace(
/[\u0100-\uffff]/g,
function(c){
return String.fromCharCode(c.charCodeAt(0)&0xff);
}
)
);
img.src=dataScheme;
};
xhr.send("");
return img;
}
var url="http://(略)";
var img=loadImage(url);
document.body.appendChild(img);
}
)();
参考エントリー
コード内で行なっている処理は以下のエントリーを参照の事。
本来推奨されていない同期リクエストを使用しているので注意。