web-dev-qa-db-fra.com

Javascript - Obtenir la hauteur de l'image

J'ai besoin d'afficher un tas d'images sur une page Web en utilisant AJAX. Tous ont des dimensions différentes, je veux donc ajuster leur taille avant de les afficher. Existe-t-il un moyen de le faire en JavaScript?

L'utilisation de la fonction getimagesize() de PHP pour chaque image entraîne un impact inutile sur les performances car il y aura de nombreuses images.

javascriptajax
30
mrunal777

Je cherchais une solution pour obtenir la hauteur et la largeur d'une image en utilisant JavaScript. J'en ai trouvé beaucoup, mais toutes ces solutions ne fonctionnaient que lorsque l'image était présente dans le cache du navigateur.

Enfin, j'ai trouvé une solution pour obtenir la hauteur et la largeur de l'image même si l'image n'existe pas dans le cache du navigateur:

<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>

Merci,

Binod Suman

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

77
Binod Suman

Essaye ça:

var curHeight;
var curWidth;

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

}
21
Stephen Wrighton

... mais ... ne serait-il pas préférable d'ajuster la taille de l'image côté serveur plutôt que de transmettre les octets au navigateur et de le faire là-bas?

Quand je dis ajuster la taille de l'image, je ne veux pas dire définir la hauteur et la largeur dans la balise d'image HTML. Si vous faites cela, vous expédiez toujours un grand nombre d'octets du serveur au client. Je veux dire, manipuler réellement l'image elle-même côté serveur.

J'ai ici du code .NET C # qui adopte cette approche, mais il doit aussi y avoir un moyen php de le faire: http://ifdefined.com/www/gallery.html

De plus, en le faisant côté serveur, cela ouvre la possibilité de faire le réglage une seule fois puis de sauvegarder l'image ajustée, ce qui serait très rapide.

3
Corey Trager

Essayez avec 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>

ou

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

Ma solution préférée pour cela serait de faire le redimensionnement côté serveur, donc vous transmettez moins de données inutiles.

Si vous devez le faire côté client et que vous devez conserver le rapport d'image, vous pouvez utiliser ce qui suit:

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;
}
1
ConroyP

Vous pouvez utiliser img.naturalWidth et img.naturalHeight pour obtenir la dimension réelle de l'image en pixels

1
moto

Voulez-vous ajuster les images elles-mêmes ou simplement la façon dont elles s'affichent? Si le premier, vous voulez quelque chose du côté serveur. Dans ce dernier cas, il vous suffit de modifier image.height et image.width.

0
Dori

Eh bien ... il y a plusieurs façons d'interpréter cette question.

La première façon et la façon dont je pense que vous voulez dire est de simplement modifier la taille d'affichage afin que toutes les images affichent la même taille. Pour cela, j'utiliserais réellement CSS et non JavaScript. Créez simplement une classe dont les valeurs de largeur et de hauteur sont définies et faites tout <img> les balises utilisent cette classe.

Une deuxième façon consiste à conserver la ration d'aspect de toutes les images, mais à mettre la taille de l'affichage à une valeur saine. Il existe un moyen d'accéder à cela en JavaScript, mais j'aurai besoin d'un peu pour écrire un exemple de code rapide.

La troisième façon, et j'espère que vous ne pensez pas de cette façon, est de modifier la taille réelle de l'image. C'est quelque chose que vous devriez faire du côté serveur, car non seulement JavaScript ne peut pas créer d'images, mais cela n'aurait aucun sens, car l'image pleine taille a déjà été envoyée.

0
Languard

Il convient de noter que dans Firefox 3 et Safari, redimensionner une image en changeant simplement la hauteur et la largeur ne semble pas trop mal. Dans d'autres navigateurs, il peut sembler très bruyant car il utilise le rééchantillonnage du plus proche voisin. Bien sûr, vous payez pour servir une image plus grande, mais cela n'a pas d'importance.

0
bhollis

Il suffit de charger l'image dans une balise cachée <img> (style = "display none"), D'écouter le déclenchement de l'événement de chargement avec jQuery, de créer une nouvelle Image() avec JavaScript, de définir la source sur image invisible, et obtenez la taille comme ci-dessus.

0
Ray