Xác định kích thước hình ảnh trong JavaScript mà không cần `<img>` tag

Question

Sử dụng JavaScript, làm cách nào để xác định kích thước của hình ảnh không có trong tài liệu mà không chèn nó vào tài liệu?

Tôi có thể tải xuống hình ảnh bằng AJAX và kiểm tra chiều cao và chiều rộng của chương trình không?

Cái gì đó như ...

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

tôi sẽ sử dụng Raphael, vì vậy nếu nó cung cấp chức năng để hiệu ứng này, phù hợp với nhu cầu của tôi.

Answer 1

Bạn không cần 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

Bạn không cần phải thêm nó vào tài liệu để đo kích thước của nó, nhưng bạn phải đợi cho nó tải ít nhất một phần. Nếu bạn cần phải làm điều đó cho có thể nhiều hơn một hình ảnh cùng một lúc, và có nó gọi một callback càng sớm càng kích thước có sẵn, bạn có thể sử dụng mô-đun imageloader tôi:

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

Dưới đây là một fiddle cho bạn. Chỉ cần sử dụng đối tượng Image.

Answer 5

Nếu bạn biết nguồn gốc của hình ảnh mà bạn có thể sử dụng một đối tượng hình ảnh javascript:

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