बिना किसी <img> टैग के बिना जावास्क्रिप्ट में छवि आकार निर्धारित करें

Question

जावास्क्रिप्ट का उपयोग करके, मैं उस छवि का आकार कैसे निर्धारित कर सकता हूं जो दस्तावेज़ में इसे डाले बिना दस्तावेज़ में नहीं है?

क्या मैं AJAX का उपयोग करके छवि डाउनलोड कर सकता हूं और इसकी ऊंचाई और चौड़ाई को प्रोग्रामेटिक रूप से देख सकता हूं?

कुछ की तरह ...

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

मैं Raphael का उपयोग किया जाएगा, इसलिए यदि यह इस आशय यह है कि सूट मेरी जरूरतों के कार्यक्षमता प्रदान करता है।

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

आप दस्तावेज़ में जोड़ने के लिए यह आकार को मापने के लिए की जरूरत नहीं है, लेकिन आप कम से कम आंशिक लोड करने के लिए इसके लिए इंतजार करना पड़ रहा है।

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 है: आप एक समय में संभवतः एक से अधिक छवि के लिए यह सब करने की ज़रूरत है, और यह रूप में जल्द ही आकार उपलब्ध है एक कॉलबैक फोन है, तो आप मेरी imageloader मॉड्यूल का उपयोग कर सकते हैं। बस Image ऑब्जेक्ट का उपयोग करें।

Answer 5

आप छवि का स्रोत पता है तो आप एक जावास्क्रिप्ट छवि वस्तु इस्तेमाल कर सकते हैं:

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