tamaño - obtener ancho y alto de una imagen javascript

Obtener el ancho real y la altura de una imagen con JavaScript?(en Safari/Chrome)

Question

Estoy creando un plugin jQuery.

¿Cómo obtengo el ancho y alto de la imagen real con Javascript en Safari?

Los siguientes trabajos con Firefox 3, IE7 y 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();

Pero en los navegadores Webkit como Safari y Google Chrome los valores son 0.

Answer 1

¿Qué image.naturalWidth propiedades image.naturalHeight y image.naturalWidth ?

Parece funcionar bien en algunas versiones de Chrome, Safari y Firefox, pero no en IE8 o incluso en IE9.

Answer 2

Ahora hay un complemento de jQuery, event.special.load , para tratar los casos en que el evento de carga en una imagen en caché no se dispara: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Answer 3

Aquí hay una solución de navegador cruzado que activa un evento cuando se cargan las imágenes seleccionadas: http://desandro.github.io/imagesloaded/ puede buscar el alto y ancho dentro de la función imagesLoaded ().

Answer 4

Cómo obtenemos las dimensiones reales correctas sin un parpadeo de imagen real:

(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();});
});

Funciona con <img class = "toreaddimensions" ...

Answer 5

Como dice Luke Smith, la carga de imágenes es un desastre . No es confiable en todos los navegadores. Este hecho me ha dolido mucho. Una imagen en caché no activará el evento en absoluto en algunos navegadores, por lo que aquellos que dicen que "la carga de imágenes es mejor que setTimeout" están equivocados.

La solución de Luke Smith está here.

Y hay una discusión interesante sobre cómo se puede manejar este lío en jQuery 1.4.

Descubrí que es bastante confiable establecer el ancho en 0, luego esperar que la propiedad "completa" se vuelva verdadera y que la propiedad del ancho sea mayor que cero. También debes estar atento a los errores.

Answer 6

Como se indicó anteriormente, la respuesta de Xavi no funcionará si las imágenes están en el caché. El problema responde al webkit que no dispara el evento de carga en las imágenes almacenadas en caché, por lo que si los atributos de ancho / altura no están establecidos explícitamente en la etiqueta img, la única forma confiable de obtener las imágenes es esperar a que se window.load evento window.load .

El evento window.load se activará siempre , por lo que es seguro acceder al ancho / alto de e img después de eso sin ningún truco.

$(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 necesita obtener el tamaño de las imágenes cargadas dinámicamente que podrían almacenarse en caché (cargadas anteriormente), puede usar el método Xavi más una cadena de consulta para activar una actualización de caché. El inconveniente es que causará otra solicitud al servidor, para un img que ya está almacenado en caché y ya debería estar disponible. Estúpido 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 ya tiene un QueryString en img.src , tendrá que analizarlo y agregar el parámetro extra para borrar el caché.

Answer 7

Echa un vistazo a este repositorio en github!

Gran ejemplo para verificar el ancho y la altura usando Javascript

https://github.com/AzizAK/ImageRealSize

--- Se solicita editado de algunos comentarios ..

Código 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);
    }

y código 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>

Answer 8

El problema raíz es que los navegadores WebKit (Safari y Chrome) cargan información de JavaScript y CSS en paralelo. Por lo tanto, JavaScript puede ejecutarse antes de que se hayan calculado los efectos de estilo de CSS, devolviendo la respuesta incorrecta. En jQuery, he encontrado que la solución es esperar hasta 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 cuanto al ancho y la altura ... dependiendo de lo que esté haciendo, es posible que desee offsetWidth y offsetHeight, que incluyen elementos como bordes y relleno.

Answer 9

Esto funciona navegador cruzado

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

obtener las dimensiones utilizando

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

¡Aclamaciones!

Answer 10

Esto funciona tanto para imágenes almacenadas en caché como dinámicamente cargadas.

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.");
    }
  }
}

Para utilizar este script:

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

Demostración: http://jsfiddle.net/9543z/2/

Answer 11

Hay mucha discusión en la respuesta aceptada sobre un problema en el que el evento onload no se dispara si una imagen se carga desde el caché de WebKit.

En mi caso, onload activa para imágenes en caché, pero la altura y el ancho siguen siendo 0. Un simple setTimeout resolvió el problema por mí:

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

No puedo explicar por qué el evento onload se está activando incluso cuando la imagen se carga desde la memoria caché (¿mejora de jQuery 1.4 / 1.5?), Pero si aún experimenta este problema, tal vez una combinación de mi respuesta y la var src = img.src; img.src = ""; img.src = src; var src = img.src; img.src = ""; img.src = src; La técnica funcionará.

(Tenga en cuenta que para mis propósitos, no me preocupan las dimensiones predefinidas, ya sea en los atributos de la imagen o los estilos CSS, pero es posible que desee eliminarlas, según la respuesta de Xavi. O clonar la imagen).

Answer 12

He hecho alguna función de utilidad de solución alternativa, utilizando el complemento jQuery imagesLoaded: 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}));
            },

Puedes usar esto pasando url, función y su contexto. La función se realiza después de cargar la imagen y devolver la imagen creada, su ancho y alto.

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

Answer 13

Jquery tiene dos propiedades llamadas naturalWidth y naturalHeight, que puedes usar de esta manera.

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

Donde my-img es un nombre de clase usado para seleccionar mi imagen.

Answer 14

Los navegadores Webkit establecen las propiedades de alto y ancho después de que se carga la imagen. En lugar de usar tiempos de espera, recomiendo usar el evento onload de una imagen. Aquí hay un ejemplo rápido:

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.
    });

Para evitar cualquiera de los efectos que CSS pueda tener en las dimensiones de la imagen, el código anterior hace una copia en memoria de la imagen. Esta es una solución muy inteligente sugerida por FDisk .

También puede utilizar los naturalHeight y naturalWidth HTML5.

Answer 15

Me topé con este hilo tratando de encontrar una respuesta para mi propia pregunta. Intenté obtener el ancho / alto de una imagen en una función DESPUÉS del cargador, y seguí con 0. Creo que esto podría ser lo que estás buscando, ya que funciona para mí:

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);
}

Answer 16

Mi situación es probablemente un poco diferente. Estoy cambiando dinámicamente el src de una imagen a través de javascript y es necesario para garantizar que la nueva imagen tenga un tamaño proporcional para adaptarse a un contenedor fijo (en una galería de fotos). Inicialmente, simplemente eliminé los atributos de ancho y alto de la imagen después de que se cargó (a través del evento de carga de la imagen) y los restablecí después de calcular las dimensiones preferidas. Sin embargo, eso no funciona en Safari y posiblemente en IE (no lo he probado a fondo en IE, pero la imagen ni siquiera se muestra, así que ...).

De todos modos, Safari mantiene las dimensiones de la imagen anterior, por lo que las dimensiones siempre están una imagen por detrás. Supongo que esto tiene algo que ver con el caché. Así que la solución más sencilla es simplemente clonar la imagen y agregarla al DOM (es importante que se agregue al DOM para obtener el con y la altura). Asigne a la imagen un valor de visibilidad oculto (no utilice la visualización de ninguno porque no funcionará). Después de obtener las dimensiones eliminar el clon.

Aquí está mi código usando 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);

Esta solución funciona en cualquier caso.

Answer 17

Otra sugerencia es utilizar el imagesLoaded .

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

Answer 18

Para agregar a la respuesta de Xavi, el gitgub de imagesLoaded Irish gitub de Paul Irish imagesLoaded que funciona según los mismos principios y soluciona el problema de algunas imágenes almacenadas en caché que no activan el evento .load () (con original original_src -> data_uri -> original_src switching).

Es ampliamente utilizado y actualizado regularmente, lo que contribuye a que sea la solución más robusta al problema, IMO.

Answer 19

Para funciones en las que no desea modificar la ubicación o imagen original.

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

Answer 20

Puede obtener la imagen mediante programación y verificar las dimensiones con Javascript sin tener que meterse con el DOM en absoluto.

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

Answer 21

Puede usar las propiedades naturalWidth y naturalHeight del elemento de imagen HTML. (Aquí hay más info ).

Lo usarías así:

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

Parece que esto funciona en todos los navegadores excepto en IE desde la versión 8 y anteriores.

Answer 22

Recientemente, necesitaba encontrar el ancho y el alto para configurar el tamaño predeterminado de .dialog que representa el gráfico. La solución que uso fue:

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

Para mí esto funciona en FF3, Opera 10, IE 8,7,6.

PS Es posible que encuentres más soluciones buscando algunos complementos como LightBox o ColorBox

Answer 23

Revisé la respuesta de Dio y funciona muy bien para mí.

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

Asegúrate de llamar todas tus funciones también. ese identificador con el tamaño de la imagen en la función de recuperación de fadeIn ().

Gracias por esto.

Answer 24

Si la imagen ya está en uso, deberías:

1. establecer simulaciones de imagen a inicial

   image.css (''width'', ''initial''); image.css (''altura'', ''inicial'');

2. obtener dimensiones

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

Answer 25

Utilice los naturalHeight y naturalWidth de HTML5 .

Por ejemplo:

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

Funciona en IE9 +, Chrome, Firefox, Safari y Opera ( stats ).

Answer 26

Utilizo un enfoque diferente, simplemente hago una llamada de Ajax al servidor para obtener el tamaño de la imagen cuando el objeto de imagen está en uso.

//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);
    }
}

y por supuesto el código del lado del servidor:

<?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);

?>

Answer 27

esto funciona para mí (safari 3.2) disparando desde dentro del evento window.onload :

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

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

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

Answer 28

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

No es necesario eliminar el estilo de los atributos de imagen o dimensiones de imagen. Simplemente cree un elemento con javascript y obtenga el ancho del objeto creado.

Answer 29

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

Del comentario de Chris: http://api.jquery.com/load-event/

Answer 30

$(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);
                            }
                        }); 

// Este código ayuda a mostrar la imagen con 200 * 274 dimensiones.