जावास्क्रिप्ट - छवि ऊंचाई

Question

मुझे AJAX का उपयोग कर वेब पेज पर छवियों का एक गुच्छा प्रदर्शित करने की आवश्यकता है। उनमें से सभी के पास अलग-अलग आयाम हैं, इसलिए मैं उन्हें प्रदर्शित करने से पहले अपने आकार को समायोजित करना चाहता हूं। जावास्क्रिप्ट में ऐसा करने का कोई तरीका है?

प्रत्येक छवि के लिए PHP के getimagesize() का उपयोग करना एक अनावश्यक प्रदर्शन हिट का कारण बनता है क्योंकि कई छवियां होंगी।

Answer 1

क्या आप छवियों को स्वयं समायोजित करना चाहते हैं, या जिस तरह से वे प्रदर्शित करते हैं? यदि पूर्व, आप सर्वर की तरफ कुछ चाहते हैं। अगर उत्तरार्द्ध, आपको बस छवि को बदलने की जरूरत है। हाइट और image.width।

Answer 2

... लेकिन ... क्या ब्राउज़र पर बाइट्स को प्रेषित करने और वहां ऐसा करने के बजाय सर्वर पक्ष पर छवि आकार को समायोजित करना बेहतर नहीं होगा?

जब मैं छवि आकार समायोजित करता हूं, तो मेरा मतलब यह नहीं है कि HTML छवि टैग में ऊंचाई और चौड़ाई निर्धारित करें। यदि आप ऐसा करते हैं, तो आप अभी भी सर्वर से क्लाइंट तक बड़ी संख्या में बाइट शिपिंग कर रहे हैं। मेरा मतलब है, वास्तव में छवि स्वयं सर्वर पक्ष में हेरफेर।

मैं नेट सी # कोड यहाँ है कि यह भी करने के लिए है कि दृष्टिकोण लेता है, लेकिन वहाँ होना चाहिए एक php रास्ता नहीं है: इसके अलावा http://ifdefined.com/www/gallery.html

, यह सर्वर साइड करके, समायोजन करने की संभावना को खोलता है कि बस एक बार और फिर समायोजित छवि को सहेजना, जो बहुत तेज़ होगा।

Answer 3

अच्छा ... इस प्रश्न की व्याख्या करने के कई तरीके हैं।

पहला तरीका और जिस तरह से मुझे लगता है कि आपको लगता है कि डिस्प्ले आकार को बदलना है ताकि सभी छवियां एक ही आकार प्रदर्शित हों। इसके लिए, मैं वास्तव में सीएसएस का उपयोग करता हूं और जावास्क्रिप्ट नहीं। बस एक वर्ग बनाएं जिसमें उपयुक्त चौड़ाई और ऊंचाई मान सेट हों, और सभी <img> टैग इस कक्षा का उपयोग करें।

दूसरा तरीका यह है कि आप सभी छवियों के पहलू राशन को संरक्षित करना चाहते हैं, लेकिन प्रदर्शन आकार को एक सौ मूल्य में स्केल करें। जावास्क्रिप्ट में इसका उपयोग करने का एक तरीका है, लेकिन मुझे त्वरित कोड नमूना लिखने के लिए थोड़ा सा आवश्यकता होगी।

तीसरा तरीका, और मुझे उम्मीद है कि आप इस तरह से इसका मतलब नहीं है, छवि के वास्तविक आकार को बदलने के लिए है। यह कुछ ऐसा है जो आपको सर्वर पक्ष पर करना होगा, क्योंकि न केवल जावास्क्रिप्ट छवियों को बनाने में असमर्थ है, लेकिन यह कोई समझ नहीं लेगा, क्योंकि पूर्ण आकार की छवि पहले से ही भेजी जा चुकी है।

Answer 4

आज़माएं:

var curHeight; 
var curWidth; 

function getImgSize(imgSrc) 
{ 
var newImg = new Image(); 
newImg.src = imgSrc; 
curHeight = newImg.height; 
curWidth = newImg.width; 

} 

Answer 5

यह ध्यान देने योग्य है कि Firefox 3 और सफारी में, बस ऊंचाई बदल रहा है और चौड़ाई बहुत बुरा नहीं दिखता है द्वारा एक छवि का आकार बदलने लायक है। अन्य ब्राउज़रों में यह बहुत शोर दिख सकता है क्योंकि यह निकटतम पड़ोसी पुनर्वसन का उपयोग कर रहा है। बेशक, आप एक बड़ी छवि की सेवा करने के लिए भुगतान कर रहे हैं, लेकिन इससे कोई फर्क नहीं पड़ता।

Answer 6

इसके लिए मेरा पसंदीदा समाधान आकार बदलने वाला सर्वर-साइड करना होगा, इसलिए आप कम अनावश्यक डेटा प्रसारित कर रहे हैं।

आप हालांकि यह क्लाइंट साइड करते हैं, और छवि अनुपात रखने की जरूरत है, तो आप नीचे दिए गए इस्तेमाल कर सकते हैं:

var image_from_ajax = new Image(); 
image_from_ajax.src = fetch_image_from_ajax(); // Downloaded via ajax call? 

image_from_ajax = rescaleImage(image_from_ajax); 

// Rescale the given image to a max of max_height and max_width 
function rescaleImage(image_name) 
{ 
    var max_height = 100; 
    var max_width = 100; 

    var height = image_name.height; 
    var width = image_name.width; 
    var ratio = height/width; 

    // If height or width are too large, they need to be scaled down 
    // Multiply height and width by the same value to keep ratio constant 
    if(height > max_height) 
    { 
     ratio = max_height/height; 
     height = height * ratio; 
     width = width * ratio; 
    } 

    if(width > max_width) 
    { 
     ratio = max_width/width; 
     height = height * ratio; 
     width = width * ratio; 
    } 

    image_name.width = width; 
    image_name.height = height; 
    return image_name; 
} 

Answer 7

मैं का उपयोग कर ऊंचाई और एक छवि की चौड़ाई प्राप्त करने के लिए एक समाधान खोज रहा था जावास्क्रिप्ट। मैंने कई पाया, लेकिन उन सभी समाधानों ने केवल तब काम किया जब छवि ब्राउज़र कैश में मौजूद थी।

अंत में मैं एक समाधान पाया छवि की ऊंचाई हो और यहां तक ​​कि चौड़ाई यदि छवि ब्राउज़र कैश में मौजूद नहीं है:,

<script type="text/javascript"> 

    var imgHeight; 
    var imgWidth; 

    function findHHandWW() { 
    imgHeight = this.height; 
    imgWidth = this.width; 
    return true; 
    } 

    function showImage(imgPath) { 
    var myImage = new Image(); 
    myImage.name = imgPath; 
    myImage.onload = findHHandWW; 
    myImage.src = imgPath; 
    } 
</script> 

धन्यवाद

बिनोद सुमन

http://binodsuman.blogspot.com/2009/06/how-to-get-height-and-widht-of-image.html

Answer 8

JQuery के साथ प्रयास करें:

<script type="text/javascript"> 
function jquery_get_width_height() 
{ 
    var imgWidth = $("#img").width(); 
    var imgHeight = $("#img").height(); 
    alert("JQuery -- " + "imgWidth: " + imgWidth + " - imgHeight: " + imgHeight); 
} 
</script> 

या

<script type="text/javascript"> 
function javascript_get_width_height() 
{ 
    var img = document.getElementById('img'); 
    alert("JavaSript -- " + "imgWidth: " + img.width + " - imgHeight: " + img.height); 
} 
</script> 

Answer 9

बस एक छिपा <img> टैग (style = "display none"),,, jQuery के साथ फायरिंग लोड घटना को सुनने के लिए एक नया Image() जावास्क्रिप्ट के साथ बनाने के लिए, अदृश्य छवि स्रोत सेट में छवि को लोड और उपरोक्त आकार प्राप्त करें।