前回の続き。
前のエントリーで書いたCanvas要素を使って画像データを取得する方法を試すために次のコードを書いた。
(
function(){
//Canvas要素を準備
var canvas=document.createElement("canvas");
if(!canvas.getContext){return false;}
//画像オブジェクトの準備
var url=prompt("image url","");
if(url==null||url==""){
return;
}
var img=new Image();
img.src=url;
//Canvasサイズの指定
// canvas.width="100";
// canvas.height="100";
//画像の描画
var cx=canvas.getContext("2d");
cx.drawImage(img,0,0);
//画像データの取得とボディへの挿入
var dataScheme=canvas.toDataURL("image/png");
var imageElem=document.createElement("img");
imageElem.src=dataScheme;
document.body.appendChild(imageElem);
}
)();
function(){
//Canvas要素を準備
var canvas=document.createElement("canvas");
if(!canvas.getContext){return false;}
//画像オブジェクトの準備
var url=prompt("image url","");
if(url==null||url==""){
return;
}
var img=new Image();
img.src=url;
//Canvasサイズの指定
// canvas.width="100";
// canvas.height="100";
//画像の描画
var cx=canvas.getContext("2d");
cx.drawImage(img,0,0);
//画像データの取得とボディへの挿入
var dataScheme=canvas.toDataURL("image/png");
var imageElem=document.createElement("img");
imageElem.src=dataScheme;
document.body.appendChild(imageElem);
}
)();
前回のエントリーを書いているときは気づかなかったが、色々と動作が違う。まず、画像データそのものを取得するのではなく描画したものを間接的に取得している点が違う。次に、画像サイズがCanvasに依存するため、取得した画像は元の画像サイズとは違ってる。そして、toDataURLメソッドで画像フォーマットを指定(第一引数を省略するとPNG)し画像データを取得するため、元の画像フォオーマットとは異なっている。この方法では元の画像のデータフォーマットは拡張子でしか判別できない。img要素で一度表示する場合を除き、画像サイズを取得する方法もない。フォーマットと画像サイズがわかったとしても一度、描画したものの取得なので元データとは当然違っている可能性が大きい。しかも、前回のエントリーで利点に上げたクロスドメインの壁を越えられるというのは実はできないらしい。
セキュリティ：情報漏洩を避けるために、toDataURL() と getImageData() メソッドは、メソッドを呼び出したスクリプトの場所と異なる場所から取り出された図形がcanvasに描かれている場合は、セキュリティ例外を発生させます。
画像を加工して取得する用途でないのであれば、素直にXMLHttpRequestを使う方がよさようだ。仮に、XMLHttpRequestを使うのが素直だとしたら...。