Obtenez la largeur et la hauteur réelles d'une image avec JavaScript? (dans Safari / Chrome)

Je crée un plugin jQuery.

Comment obtenir la largeur et la hauteur réelles de l'image avec Javascript dans Safari?

Les éléments suivants fonctionnent avec Firefox 3, IE7 et Opera 9:

var pic = $("img")

// need to remove these in of case img-element has set width and height
pic.removeAttr("width"); 
pic.removeAttr("height");

var pic_real_width = pic.width();
var pic_real_height = pic.height();

Mais dans les navigateurs Webkit comme Safari et Google Chrome, les valeurs sont 0.

Les navigateurs Webkit définissent la propriété height et width après le chargement de l'image. Au lieu d'utiliser des délais d'attente, je vous recommande d'utiliser l'événement de chargement d'une image. Voici un petit exemple:

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

Pour éviter tout effet que CSS pourrait avoir sur les dimensions de l'image, le code ci-dessus crée une copie en mémoire de l'image. Il s'agit d'une solution très intelligente suggérée par FDisk .

Vous pouvez également utiliser les attributs naturalHeightet naturalWidthHTML5.

Utilisez les attributs naturalHeightet naturalWidthde HTML5 .

Par exemple:

var h = document.querySelector('img').naturalHeight;

Fonctionne dans IE9 +, Chrome, Firefox, Safari et Opera ( statistiques ).

function getOriginalWidthOfImg(img_element) {
    var t = new Image();
    t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
    return t.width;
}

Vous n'avez pas besoin de supprimer le style de l'image ou des attributs des dimensions de l'image. Créez simplement un élément avec javascript et obtenez la largeur de l'objet créé.

Le problème racine est que les navigateurs WebKit (Safari et Chrome) chargent les informations JavaScript et CSS en parallèle. Ainsi, JavaScript peut s'exécuter avant que les effets de style de CSS aient été calculés, renvoyant la mauvaise réponse. Dans jQuery, j'ai trouvé que la solution est d'attendre que document.readyState == 'complete', .eg,

jQuery(document).ready(function(){
  if (jQuery.browser.safari && document.readyState != "complete"){
    //console.info('ready...');
    setTimeout( arguments.callee, 100 );
    return;
  } 
  ... (rest of function) 

En ce qui concerne la largeur et la hauteur ... selon ce que vous faites, vous voudrez peut-être offsetWidth et offsetHeight, qui incluent des éléments comme les bordures et le rembourrage.

Il y a beaucoup de discussions dans la réponse acceptée à propos d'un problème où l' onloadévénement ne se déclenche pas si une image est chargée à partir du cache WebKit.

Dans mon cas, les onloadincendies pour les images mises en cache, mais la hauteur et la largeur sont toujours 0. Un simple a setTimeoutrésolu le problème pour moi:

$("img").one("load", function(){
    var img = this;
    setTimeout(function(){
        // do something based on img.width and/or img.height
    }, 0);
});

Je ne peux pas expliquer pourquoi l' onloadévénement se déclenche même lorsque l'image est chargée à partir du cache (amélioration de jQuery 1.4 / 1.5?) - mais si vous rencontrez toujours ce problème, peut-être une combinaison de ma réponse et de la var src = img.src; img.src = ""; img.src = src;technique travail.

(Notez que pour mes besoins, je ne suis pas préoccupé par les dimensions prédéfinies, que ce soit dans les attributs de l'image ou les styles CSS - mais vous voudrez peut-être les supprimer, selon la réponse de Xavi. Ou cloner l'image.)

cela fonctionne pour moi (safari 3.2), en tirant de l'intérieur de l' window.onloadévénement:

$(window).load(function() {
  var pic = $('img');

  pic.removeAttr("width"); 
  pic.removeAttr("height");

  alert( pic.width() );
  alert( pic.height() );
});

Vous pouvez obtenir l'image par programme et vérifier les dimensions en utilisant Javascript sans avoir à jouer avec le DOM du tout.

var img = new Image();
img.onload = function() {
  console.log(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

Qu'en est- image.naturalHeightil des image.naturalWidthpropriétés?

Semble fonctionner correctement sur plusieurs versions de Chrome, Safari et Firefox, mais pas du tout dans IE8 ou même IE9.

Jquery a deux propriétés appelées naturalWidth et naturalHeight, que vous pouvez utiliser de cette façon.

$('.my-img')[0].naturalWidth 
$('.my-img')[0].naturalHeight

Où my-img est un nom de classe utilisé pour sélectionner mon image.

Comment obtenir les bonnes dimensions réelles sans une image réelle clignotante:

(function( $ ){
   $.fn.getDimensions=function(){
         alert("First example:This works only for HTML code without CSS width/height definition.");
         w=$(this, 'img')[0].width;
         h=$(this, 'img')[0].height;

         alert("This is a width/height on your monitor: " + $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);

         //This is bad practice - it shows on your monitor
         $(this, 'img')[0].removeAttribute( "width" );
         $(this, 'img')[0].removeAttribute( "height" );
         alert("This is a bad effect of view after attributes removing, but we get right dimensions: "+  $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);
         //I'am going to repare it
         $(this, 'img')[0].width=w;
         $(this, 'img')[0].height=h;
         //This is a good practice - it doesn't show on your monitor
         ku=$(this, 'img').clone(); //We will work with a clone
         ku.attr( "id","mnbv1lk87jhy0utrd" );//Markup clone for a final removing
         ku[0].removeAttribute( "width" );
         ku[0].removeAttribute( "height" );
         //Now we still get 0
         alert("There are still 0 before a clone appending to document: "+ $(ku)[0].width+"/"+$(ku)[0].height);
         //Hide a clone
         ku.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'}); 
         //A clone appending
         $(document.body).append (ku[0]);
         alert("We get right dimensions: "+ $(ku)[0].width+"/"+$(ku)[0].height);
         //Remove a clone
         $("#mnbv1lk87jhy0utrd").remove();

         //But a next resolution is the best of all. It works in case of CSS definition of dimensions as well.
         alert("But if you want to read real dimensions for image with CSS class definition outside of img element, you can't do it with a clone of image. Clone method is working with CSS dimensions, a clone has dimensions as well as in CSS class. That's why you have to work with a new img element.");
         imgcopy=$('<img src="'+ $(this, 'img').attr('src') +'" />');//new object 
         imgcopy.attr( "id","mnbv1lk87jhy0aaa" );//Markup for a final removing
         imgcopy.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'});//hide copy 
         $(document.body).append (imgcopy);//append to document 
         alert("We get right dimensions: "+ imgcopy.width()+"/"+imgcopy.height());
         $("#mnbv1lk87jhy0aaa").remove();


   }
})( jQuery );

$(document).ready(function(){

   $("img.toreaddimensions").click(function(){$(this).getDimensions();});
});

Cela fonctionne avec <img class = "toreaddimensions" ...

Comme indiqué précédemment, la réponse Xavi ne fonctionnera pas si les images sont dans le cache. Le problème répond au webkit qui ne déclenche pas l'événement de chargement sur les images mises en cache, donc si les attrs de largeur / hauteur ne sont pas explicitement définis dans la balise img, le seul moyen fiable d'obtenir les images est d'attendre que l' window.loadévénement soit déclenché.

L' window.loadévénement se déclenchera toujours , il est donc sûr d'accéder à la largeur / hauteur de et img après cela sans aucune astuce.

$(window).load(function(){

   //these all work

   $('img#someId').css('width');
   $('img#someId').width();
   $('img#someId').get(0).style.width;
   $('img#someId').get(0).width; 

});

Si vous devez obtenir la taille des images chargées dynamiquement qui pourraient être mises en cache (précédemment chargées), vous pouvez utiliser la méthode Xavi plus une chaîne de requête pour déclencher une actualisation du cache. L'inconvénient est qu'il provoquera une autre demande au serveur, pour un img qui est déjà mis en cache et devrait être déjà disponible. Stupide Webkit.

var pic_real_width   = 0,
    img_src_no_cache = $('img#someId').attr('src') + '?cache=' + Date.now();

$('<img/>').attr('src', img_src_no_cache).load(function(){

   pic_real_width = this.width;

});

ps: si vous avez déjà une QueryString dans le img.src, vous devrez l' analyser et ajouter le paramètre supplémentaire pour vider le cache.

Comme le dit Luke Smith, la charge d'image est un gâchis . Ce n'est pas fiable sur tous les navigateurs. Ce fait m'a fait très mal. Une image mise en cache ne déclenchera pas l'événement du tout dans certains navigateurs, donc ceux qui ont dit "la charge de l'image est meilleure que setTimeout" ont tort.

La solution de Luke Smith est ici.

Et il y a une discussion intéressante sur la façon dont ce désordre pourrait être géré dans jQuery 1.4.

J'ai trouvé qu'il est assez fiable de définir la largeur à 0, puis d'attendre que la propriété "complete" se vérifie et que la propriété width soit supérieure à zéro. Vous devez également surveiller les erreurs.

$("#myImg").one("load",function(){
  //do something, like getting image width/height
}).each(function(){
  if(this.complete) $(this).trigger("load");
});

D'après le commentaire de Chris: http://api.jquery.com/load-event/

Ma situation est probablement un peu différente. Je change dynamiquement le src d'une image via javascript et je devais m'assurer que la nouvelle image est dimensionnée proportionnellement pour s'adapter à un conteneur fixe (dans une galerie de photos). Au départ, je viens de supprimer les attributs de largeur et de hauteur de l'image après son chargement (via l'événement de chargement de l'image) et de les réinitialiser après avoir calculé les dimensions préférées. Cependant, cela ne fonctionne pas dans Safari et peut-être IE (je ne l'ai pas testé complètement dans IE, mais l'image ne s'affiche même pas, alors ...).

Quoi qu'il en soit, Safari conserve les dimensions de l'image précédente afin que les dimensions soient toujours une image derrière. Je suppose que cela a quelque chose à voir avec le cache. La solution la plus simple consiste donc à simplement cloner l'image et à l'ajouter au DOM (il est important qu'elle soit ajoutée au DOM pour obtenir le avec et la hauteur). Donnez à l'image une valeur de visibilité cachée (n'utilisez pas d'afficher aucune car cela ne fonctionnera pas). Après avoir obtenu les dimensions, supprimez le clone.

Voici mon code utilisant jQuery:

// Hack for Safari and others
// clone the image and add it to the DOM
// to get the actual width and height
// of the newly loaded image

var cloned, 
    o_width, 
    o_height, 
    src = 'my_image.jpg', 
    img = [some existing image object];

$(img)
.load(function()
{
    $(this).removeAttr('height').removeAttr('width');
    cloned = $(this).clone().css({visibility:'hidden'});
    $('body').append(cloned);
    o_width = cloned.get(0).width; // I prefer to use native javascript for this
    o_height = cloned.get(0).height; // I prefer to use native javascript for this
    cloned.remove();
    $(this).attr({width:o_width, height:o_height});
})
.attr(src:src);

Cette solution fonctionne dans tous les cas.

Il existe maintenant un plugin jQuery event.special.load, pour gérer les cas où l'événement de chargement sur une image en cache ne se déclenche pas: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Récemment, j'ai dû trouver la largeur et la hauteur pour définir la taille par défaut du .dialog représentant le graphique. La solution que j'utilise était:

 graph= $('<img/>', {"src":'mySRC', id:'graph-img'});
    graph.bind('load', function (){
        wid = graph.attr('width');
        hei = graph.attr('height');

        graph.dialog({ autoOpen: false, title: 'MyGraphTitle', height:hei, width:wid })
    })

Pour moi, cela fonctionne dans FF3, Opera 10, IE 8,7,6

PS Vous trouverez peut-être d'autres solutions en regardant dans certains plugins comme LightBox ou ColorBox

Pour ajouter à la réponse de Xavi, le gitub de Paul Irish de David Desandro propose une fonction appelée imagesLoaded () qui fonctionne sur les mêmes principes, et contourne le problème des images en cache de certains navigateurs qui ne déclenchent pas l'événement .load () (avec intelligent original_src -> data_uri -> commutation original_src).

Il est largement utilisé et mis à jour régulièrement, ce qui en fait la solution la plus robuste au problème, l'OMI.

Cela fonctionne pour les images mises en cache et chargées dynamiquement.

function LoadImage(imgSrc, callback){
  var image = new Image();
  image.src = imgSrc;
  if (image.complete) {
    callback(image);
    image.onload=function(){};
  } else {
    image.onload = function() {
      callback(image);
      // clear onLoad, IE behaves erratically with animated gifs otherwise
      image.onload=function(){};
    }
    image.onerror = function() {
        alert("Could not load image.");
    }
  }
}

Pour utiliser ce script:

function AlertImageSize(image) {
  alert("Image size: " + image.width + "x" + image.height);
}
LoadImage("http://example.org/image.png", AlertImageSize);

Démo: http://jsfiddle.net/9543z/2/

J'ai fait une fonction utilitaire de contournement, en utilisant le plugin jquery imagesLoaded: https://github.com/desandro/imagesloaded

            function waitForImageSize(src, func, ctx){
                if(!ctx)ctx = window;
                var img = new Image();
                img.src = src;
                $(img).imagesLoaded($.proxy(function(){
                    var w = this.img.innerWidth||this.img.naturalWidth;
                    var h = this.img.innerHeight||this.img.naturalHeight;
                    this.func.call(this.ctx, w, h, this.img);
                },{img: img, func: func, ctx: ctx}));
            },

Vous pouvez l'utiliser en passant l'url, la fonction et son contexte. La fonction est exécutée après que l'image est chargée et renvoie l'image créée, sa largeur et sa hauteur.

waitForImageSize("image.png", function(w,h){alert(w+","+h)},this)

Si l'image est déjà utilisée, vous devez:

1. définir les simulations d'image sur initial

   image.css ('largeur', 'initiale'); image.css ('hauteur', 'initiale');

2. obtenir des dimensions

   var originalWidth = $ (this) .width (); var originalHeight = $ (this) .height ();

Vous pouvez utiliser les propriétés naturalWidth et naturalHeight de l'élément d'image HTML. (Voici plus d' informations ).

Vous l'utiliseriez comme ceci:

//you need a reference to the DOM element, not a jQuery object. It would be better if you can use document.getElementByTagsName or ID or any other native method
var pic = $("img")[0];
var pic_real_width = pic.naturalWidth;
var pic_real_height = pic.naturalHeight;

Il semble que cela fonctionne dans tous les navigateurs, sauf sur IE à partir de la version 8 et inférieure.

J'ai vérifié la réponse de Dio et cela fonctionne très bien pour moi.

$('#image').fadeIn(10,function () {var tmpW = $(this).width(); var tmpH = $(this).height(); });

Assurez-vous d'appeler également toutes vos fonctions. qui gère avec la taille de l'image dans la fonction de rappel de fadeIn ().

Merci pour cela.

J'utilise une approche différente, faites simplement un appel Ajax au serveur pour obtenir la taille de l'image lorsque l'objet image est en cours d'utilisation.

//make json call to server to get image size
$.getJSON("http://server/getimagesize.php",
{"src":url},
SetImageWidth
);

//callback function
function SetImageWidth(data) {

    var wrap = $("div#image_gallery #image_wrap");

    //remove height
     wrap.find("img").removeAttr('height');
    //remove height
     wrap.find("img").removeAttr('width');

    //set image width
    if (data.width > 635) {
        wrap.find("img").width(635);
    }
    else {
         wrap.find("img").width(data.width);
    }
}

et bien sûr le code côté serveur:

<?php

$image_width = 0;
$image_height = 0;

if (isset ($_REQUEST['src']) && is_file($_SERVER['DOCUMENT_ROOT'] . $_REQUEST['src'])) {

    $imageinfo = getimagesize($_SERVER['DOCUMENT_ROOT'].$_REQUEST['src']);
    if ($imageinfo) {
       $image_width=  $imageinfo[0];
       $image_height= $imageinfo[1];
    }
}

$arr = array ('width'=>$image_width,'height'=>$image_height);

echo json_encode($arr);

?>

Cela fonctionne sur plusieurs navigateurs

var img = new Image();
$(img).bind('load error', function(e)
{
    $.data(img, 'dimensions', { 'width': img.width, 'height': img.height });                    
});
img.src = imgs[i];              

obtenir les dimensions en utilisant

$(this).data('dimensions').width;
$(this).data('dimensions').height;

À votre santé!

Une autre suggestion est d'utiliser le plugin imagesLoaded .

$("img").imagesLoaded(function(){
alert( $(this).width() );
alert( $(this).height() );
});

$(document).ready(function(){
                            var image = $("#fix_img");
                            var w = image.width();
                            var h = image.height();
                            var mr = 274/200;
                            var ir = w/h
                            if(ir > mr){
                                image.height(200);
                                image.width(200*ir);
                            } else{
                                image.width(274);
                                image.height(274/ir);
                            }
                        }); 

// Ce code aide à montrer l'image avec 200 * 274 dimensions

Voici une solution multi-navigateur qui déclenche un événement lorsque vos images sélectionnées sont chargées: http://desandro.github.io/imagesloaded/ vous pouvez rechercher la hauteur et la largeur dans la fonction imagesLoaded ().

Je suis tombé sur ce fil en essayant de trouver une réponse à ma propre question. J'essayais d'obtenir la largeur / hauteur d'une image dans une fonction APRÈS le chargeur, et je n'arrêtais pas de trouver 0. J'ai l'impression que c'est peut-être ce que vous recherchez, car cela fonctionne pour moi:

tempObject.image = $('<img />').attr({ 'src':"images/prod-" + tempObject.id + ".png", load:preloader });
xmlProjectInfo.push(tempObject);

function preloader() {
    imagesLoaded++;
    if (imagesLoaded >= itemsToLoad) { //itemsToLoad gets set elsewhere in code
        DetachEvent(this, 'load', preloader); //function that removes event listener
        drawItems();
    }   
}

function drawItems() {
    for(var i = 1; i <= xmlProjectInfo.length; i++)
        alert(xmlProjectInfo[i - 1].image[0].width);
}

Découvrez ce référentiel dans github!

Excellent exemple pour vérifier la largeur et la hauteur à l'aide de Javascript

https://github.com/AzizAK/ImageRealSize

--- Modifié est demandé à partir de certains commentaires ..

Code Javascript:

 function CheckImageSize(){
var image = document.getElementById("Image").files[0];
           createReader(image, function (w, h) {

                alert("Width is: " + w + " And Height is: "+h);
});            
}


  function  createReader(file, whenReady) {
        var reader = new FileReader;
        reader.onload = function (evt) {
            var image = new Image();
            image.onload = function (evt) {
                var width = this.width;
                var height = this.height;
                if (whenReady) whenReady(width, height);
            };
            image.src = evt.target.result;
        };
        reader.readAsDataURL(file);
    }

et code HTML:

<html>
<head>
<title>Image Real Size</title>
<script src="ImageSize.js"></script>
</head>
<body>
<input type="file" id="Image"/>
<input type="button" value="Find the dimensions" onclick="CheckImageSize()"/>
</body>
<html>

Pour les fonctions où vous ne souhaitez pas modifier l'emplacement ou l'image d'origine.

$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);