जावास्क्रिप्ट

Question

के साथ छवि का आकार बदलें मैं जावास्क्रिप्ट के साथ एक छवि का आकार बदलने की कोशिश कर रहा हूं। जेएस फ़ाइल एचटीएमएल पेज से अलग है।

मैं जेएस फ़ाइल में एक छवि की ऊंचाई और चौड़ाई निर्धारित करना चाहता हूं। ऐसा करने के किसी भी अच्छे तरीके?

Answer 1

जब आप अपनी छवि के लिए एक संदर्भ है, तो आप अपनी ऊंचाई और चौड़ाई इतनी तरह सेट कर सकते हैं: एचटीएमएल में

var yourImg = document.getElementById('yourImgId'); 
if(yourImg && yourImg.style) { 
    yourImg.style.height = '100px'; 
    yourImg.style.width = '200px'; 
} 

, यह इस प्रकार दिखाई देगा:

<img src="src/to/your/img.jpg" id="yourImgId" alt="alt tags are key!"/> 

Answer 2

आप बदल सकते हैं इस तरह की वास्तविक चौड़ाई/ऊंचाई विशेषताओं:

var theImg = document.getElementById('theImgId'); 
theImg.height = 150; 
theImg.width = 150; 

Answer 3

यदि आप लोड होने के बाद किसी छवि का आकार बदलना चाहते हैं, तो आप अटैचमेंट कर सकते हैं टैग की घटना onload पर। ध्यान दें कि यह सभी ब्राउज़रों में समर्थित नहीं हो सकता है (Microsoft's reference दावा करता है कि यह HTML 4.0 spec का हिस्सा है, लेकिन HTML 4.0 spec<img> के लिए onload ईवेंट सूचीबद्ध नहीं करता है)।

नीचे कोड परीक्षण किया जाता है और काम करने में: आईई 6, 7 & 8, Firefox 2, 3 & 3.5, ओपेरा 9 & 10, सफ़ारी 3 & 4 और गूगल क्रोम:

<img src="yourImage.jpg" border="0" height="real_height" width="real_width" 
    onload="resizeImg(this, 200, 100);"> 

<script type="text/javascript"> 
function resizeImg(img, height, width) { 
    img.height = height; 
    img.width = width; 
} 
</script> 

Answer 4

एक छवि बदलने आसान है, लेकिन इसे बदलने के बाद आप मूल आकार में इसे कैसे बदल सकते हैं? कोड के इन सरल ब्लॉक में

 
var i,L=document.images.length; 
for(i=0;i<L;++i){ 
document.images[i].style.height = 'auto'; //setting CSS value 
document.images[i].style.width = 'auto'; //setting CSS value 
// document.images[i].height = ''; (don't need this, would be setting img.attribute) 
// document.images[i].width = ''; (don't need this, would be setting img.attribute) 
} 

Answer 5

// This one has print statement so you can see the result at every stage if  you would like. They are not needed 

function crop(image, width, height) 
{ 
    image.width = width; 
    image.height = height; 
    //print ("in function", image, image.getWidth(), image.getHeight()); 
    return image; 
} 

var image = new SimpleImage("name of your image here"); 
//print ("original", image, image.getWidth(), image.getHeight()); 
//crop(image,200,300); 
print ("final", image, image.getWidth(), image.getHeight()); 

Answer 6

you can see the result here आप अपनी छवि के आकार को बदल सकते हैं, और जब यह बड़ा कर: आप मूल आकार में वापस एक दस्तावेज़ में सभी छवियों को बदलने के लिए इस कोशिश कर सकते हैं माउस छवि पर दर्ज करें, और जब यह मोव छोड़ जाए तो यह मूल आकार में वापस आ जाएगा।

एचटीएमएल:

<div> 
<img onmouseover="fifo()" onmouseleave="fifo()" src="your_image" 
     width="10%" id="f" > 
</div> 

js फ़ाइल:

var b=0; 
function fifo() { 
     if(b==0){ 
      document.getElementById("f").width = "300"; 
      b=1; 
      } 
     else 
      { 
     document.getElementById("f").width = "100"; 
      b=0; 
     } 
    }