Javascript - Get Image height

Question

J'ai besoin d'afficher un tas d'images sur une page Web en utilisant AJAX. Tous ont des dimensions différentes, donc je veux ajuster leur taille avant de les afficher. Y a-t-il un moyen de le faire en JavaScript? L'utilisation du code getimagesize() de PHP pour chaque image provoque une perte de performance inutile car il y aura beaucoup d'images.

Answer 1

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é du serveur. Si ce dernier, vous avez juste besoin de changer image.height et image.width.

Answer 2

... 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à?

Lorsque je dis ajuster la taille de l'image, je ne veux pas dire définir la hauteur et la largeur de l'étiquette d'image HTML. Si vous faites cela, vous envoyez toujours un grand nombre d'octets du serveur au client. Je veux dire, en fait manipuler l'image elle-même côté serveur.

Je .NET C# code ici qui prend cette approche, mais il doit y avoir un moyen de php pour le faire aussi: http://ifdefined.com/www/gallery.html

En outre, en le faisant côté serveur, qui ouvre la possibilité de faire l'ajustement juste une fois puis en sauvegardant l'image ajustée, ce qui serait très rapide.

Answer 3

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 simplement de modifier la taille de l'affichage de sorte que toutes les images affichent la même taille. Pour cela, j'utiliserais CSS et pas JavaScript. Créez simplement une classe dont les valeurs de largeur et de hauteur appropriées sont définies, et faites en sorte que tous les tags <img> utilisent cette classe.

Une deuxième méthode consiste à conserver le rapport d'aspect de toutes les images, mais à adapter la taille de l'affichage à une valeur saine. Il y a un moyen d'y accéder en JavaScript, mais il me faudra un peu pour rédiger un exemple de code rapide.

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

Answer 4

Essayez ceci:

var curHeight; 
var curWidth; 

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

} 

Answer 5

Il convient de noter que dans Firefox 3 et Safari, redimensionnement d'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 le plus proche. Bien sûr, vous payez pour servir une image plus grande, mais cela n'a pas d'importance.

Answer 6

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 cependant, et la nécessité de maintenir le ratio d'image, vous pouvez utiliser le ci-dessous:

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

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

Enfin, je trouve une solution pour obtenir la hauteur de l'image et la largeur 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

Answer 8

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> 

Answer 9

il suffit de charger l'image dans une balise <img> cachée (style = "display none"), écoutez l'événement de chargement de tir avec jQuery, créez un nouveau Image() avec JavaScript, réglez la source sur l'image invisible, et obtenir la taille comme ci-dessus.