web-dev-qa-db-fra.com

Changer la taille de l'image avec JavaScript

J'essaie de changer la taille d'une image avec JavaScript. Le fichier jS est distinct de la page HTML.

Je veux définir la hauteur et la largeur d'une image dans le fichier JS. Des bonnes manières de faire ça?

javascriptimage
43
Spyderfusion02

Une fois que vous avez une référence à votre image, vous pouvez définir sa hauteur et sa largeur comme suit:

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

Dans le code HTML, cela ressemblerait à ceci:

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

Vous pouvez modifier les attributs largeur/hauteur réels comme suit:

var theImg = document.getElementById('theImgId');
theImg.height = 150;
theImg.width = 150;
16
Colin O'Dell

Si vous souhaitez redimensionner une image après son chargement, vous pouvez attacher à l'événement onload de la balise <img>. Notez qu'il peut ne pas être pris en charge par tous les navigateurs ( La référence de Microsoft affirme qu'il fait partie de la spécification HTML 4.0, mais la spécification HTML 4.0 ne répertorie pas l'événement onload pour <img>).

Le code ci-dessous est testé et fonctionne sous: IE 6, 7 et 8, Firefox 2, 3 et 3.5, Opera 9 et 10, Safari 3 et 4 et 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>
6
Grant Wagner

Il est facile de changer une image, mais comment la remettre à sa taille originale après l'avoir modifiée? Vous pouvez essayer ceci pour remettre toutes les images d’un document à leur taille originale:

 var i, L = document.images.length; 
 pour (i = 0; i <L; ++ i) {
 document.images [i] .style.height = 'auto'; // définition de la valeur CSS 
 document.images [i] .style.width = 'auto'; // définition de la valeur CSS
// document.images [i] .height = ''; (vous n'avez pas besoin de cela, définissez img.attribute) 
 // document.images [i] .width = ''; (pas besoin de ça, ce serait mettre img.attribute) 
}
4
Will

vous pouvez voir le résultat ici .__ Dans ce simple bloc de code, vous pouvez modifier la taille de votre image et l'agrandir lorsque la souris entre par dessus l'image laisser.

html:

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

fichier js:

var b=0;
function fifo() {
       if(b==0){
            document.getElementById("f").width = "300";
           b=1;
          }
       else
          {
         document.getElementById("f").width = "100";
          b=0;
        }
   }
2
H.taha
//  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());
0
JDH