Określić rozmiar obrazu w JavaScript bez `<img>` tag

Question

Przy użyciu JavaScript, jak określić rozmiar obrazu, którego nie ma w dokumencie bez wstawienia go do dokumentu?

Czy mogę pobrać obraz za pomocą AJAX i sprawdzić jego wysokość i szerokość programowo?

Coś ...

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(); 

będę używając Raphael, więc jeśli to oferuje funkcjonalność tego efektu, który pasuje do moich potrzeb.

Answer 1

Nie potrzebujesz 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

Nie musisz dodać go do dokumentu, aby zmierzyć jego wielkość, ale trzeba czekać na to, aby przynajmniej częściowo obciążenia. Jeśli trzeba to zrobić dla ewentualnie więcej niż jeden obraz na raz, i to nazwać zwrotnego jak tylko rozmiar jest dostępny, można użyć mój moduł 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

Oto fiddle dla Ciebie. Po prostu użyj obiektu Image.

Answer 5

Jeśli znasz źródło obrazu, można użyć JavaScript Object obrazu:

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