una - validar peso de imagen javascript

¿Cómo obtengo las dimensiones naturales de una imagen usando javascript o jquery?

Question

Tengo este código hasta ahora:

var img = document.getElementById(''draggable'');
var width = img.clientWidth;
var height = img.clientHeight;

Sin embargo, esto me da los atributos html - estilos css. Quiero obtener las dimensiones del recurso de imagen real, del archivo.

Necesito esto porque al cargar una imagen, su ancho se establece en 0px y no tengo idea de por qué o dónde está sucediendo esto. Para evitarlo quiero obtener la dimensión real y restablecerlos. es posible?

Edit: Incluso cuando trato de obtener naturalWidth obtengo 0 como resultado. He añadido una foto. Lo extraño es que solo sucede cuando subo nuevos archivos y, al actualizar, funciona como debería.

http://oi39.tinypic.com/3582xq9.jpg

Answer 1

Hay img.naturalHeight y img.naturalWidth que te dan el ancho y la altura de la imagen en sí, y no el elemento DOM.

Answer 2

Podría usar naturalWidth y naturalHeight , estas propiedades contienen el ancho y la altura reales y no modificados de la imagen, pero debe esperar hasta que la imagen se haya cargado para obtenerlos.

var img = document.getElementById(''draggable'');

img.onload = function() {
    var width  = img.naturalWidth;
    var height = img.naturalHeight;
}

Esto solo es compatible con IE9 y versiones superiores. Si tiene que admitir un navegador más antiguo, puede crear una nueva imagen, establecer su origen en la misma imagen y, si no modifica el tamaño de la imagen, devolverá las imágenes de forma natural. tamaño, ya que ese sería el valor predeterminado cuando no se da otro tamaño

var img     = document.getElementById(''draggable''),
    new_img = new Image();

new_img.onload = function() {
    var width  = this.width,
        heigth = this.height;
}

new_img.src = img.src;

FIDDLE

Answer 3

Puedes usar la siguiente función que hice.

Función

function getImageDimentions(imageNode) {
  var source = imageNode.src;
  var imgClone = document.createElement("img");
  imgClone.src = source;
  return {width: imgClone.width, height: imgClone.height}
}

html:

<img id="myimage" src="foo.png">

utilízalo así

var image = document.getElementById("myimage"); // get the image element
var dimentions = getImageDimentions(image); // get the dimentions
alert("width: " + dimentions.width + ", height: " + dimentions.height); // give the user a visible alert of the dimentions