JavaScriptで画像サイズを '<img>`タグなしで確認する

Question

JavaScriptを使用して、文書に挿入されていない画像のサイズを確認するにはどうすればよいですか？

AJAXを使用してイメージをダウンロードし、その高さと幅をプログラムで確認できますか？

のような何か...それは私のニーズに合った、この効果に機能を提供していますので、もし私が、Raphaelを使用することがあります

var xmlhttp = new XMLHttpRequest(); 
xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     var imageSize = MEGIC_GET_FILE_SIZE_FUNCTION(xmlhttp); 
     alert("The image is "+imageSize.width+","+imageSize.height+"."); 
    } 
} 
xmlhttp.open("GET","lena.jpg",true); 
xmlhttp.send(); 

。

Answer 1

あなたはajaxは必要ありません。

var img = new Image(); 
img.onload = function() { 
    alert("The image is " + this.width + "x" + this.height); 
} 
img.src = "lena.jpg"; 

Answer 2

var img = new Image(); 
img.src = url; 
var height = img.height; 
var width = img.width; 

Answer 3

サイズを測定するためにドキュメントに追加する必要はありませんが、少なくとも部分的に読み込まれるまで待つ必要があります。あなたが一度に一つの画像よりも、おそらく多くのためにそれを行うと、それは、すぐにサイズが利用可能であるとしてコールバックを呼び出すする必要がある場合、あなたは私のimageloaderモジュールを使用することができます。

var ImageLoader = { 
maxChecks: 1000, 
list: [], 
intervalHandle : null, 

loadImage : function (callback, url) { 
    var img = new Image(); 
    img.src = url; 
    if (img.width && img.height) { 
    callback (mg.width, img.height, url, 0); 
    } 
    else { 
    var obj = {image: img, url: url, callback: callback, checks: 1}; 
    var i; 
    for (i=0; i < this.list.length; i++) { 
     if (this.list[i] == null) 
     break; 
     } 
    this.list[i] = obj; 
    if (!this.intervalHandle) 
     this.intervalHandle = setInterval(this.interval, 30); 
    } 
    }, 

// called by setInterval 
interval : function() { 
    var count = 0; 
    var list = ImageLoader.list, item; 
    for (var i=0; i<list.length; i++) { 
    item = list[i]; 
    if (item != null) { 
     if (item.image.width && item.image.height) { 
     item.callback (item.image.width, item.image.height, item.url, item.checks); 
     ImageLoader.list[i] = null; 
     } 
     else if (item.checks > ImageLoader.maxChecks) { 
     item.callback (0, 0, item.url, item.checks); 
     ImageLoader.list[i] = null; 
     } 
     else { 
     count++; 
     item.checks++; 
     } 
     } 
    } 
    if (count == 0) { 
    ImageLoader.list = []; 
    clearInterval (ImageLoader.intervalHandle); 
    delete ImageLoader.intervalHandle; 
    } 
    } 
}; 

Answer 4

はここにあなたのためのfiddleです。ちょうどImageオブジェクトを使用してください。

Answer 5

あなたがイメージのソースを知っていればあなたはjavascriptのイメージオブジェクトを使用できます。これは正しい方向であるが、まだ動作しません

function MEGIC_GET_FILE_SIZE_FUNCTION(src){ 
    var img = new Image(); 
    img.src = src; 
    return {height: img.height, width: img.width}; 
}