Zmień rozmiar obrazu z JavaScript

Question

Próbuję zmienić rozmiar obrazu z JavaScript. Plik jS jest oddzielony od strony HTML.

Chcę ustawić wysokość i szerokość obrazu w pliku JS. Jakieś dobre sposoby na zrobienie tego?

Answer 1

Gdy masz odniesienie do obrazu, można ustawić jego wysokość i szerokość tak:

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

w HTML, to będzie wyglądać następująco:

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

Answer 2

można zmienić rzeczywiste atrybuty szerokości i wysokości:

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

Answer 3

Jeśli chcesz zmienić rozmiar obrazu po jego załadowaniu, możesz ach do zdarzenia onload znacznika . Zauważ, że to może nie być dostępna we wszystkich przeglądarkach (Microsoft's reference roszczeń jest częścią specyfikacji HTML 4.0, ale HTML 4.0 spec nie wymienia zdarzenia onload dla <img>).

Poniższy kod jest testowany i działa: IE 6, 7 & 8, Firefox 2, 3 & 3.5, Opera 9 & 10, Safari 3 & 4 i Google Chrome:

<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

Zmiana obrazu jest łatwe, ale jak zmienić go z powrotem na pierwotny rozmiar po zmianie? Można próbować to zmienić wszystkie obrazy w dokumencie z powrotem do pierwotnej wielkości:

 
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 W tych prostych bloku kodu można zmienić rozmiar obrazu, i sprawiają, że większe, gdy Mysz wejdzie na obraz i powróci do swojego pierwotnego rozmiaru, kiedy opuścisz mouve.

html:

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

js file:

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