Obteniendo el tamaño original de una imagen escalada

Question

¿Cómo puedo obtener el tamaño original, sin escala, de una imagen de javascript si mi imagen es así: <img src="picture.png" style="max-width:100px">?

He encontrado mi respuesta, puede utilizar img.naturalWidth para obtener la anchura original

var img = document.getElementsByTagName("img")[0]; 
img.onload=function(){ 
    console.log("Width",img.naturalWidth); 
    console.log("Height",img.naturalHeight); 
} 

Source

Answer 1

Una forma de hacerlo es crear otro elemento de la imagen, establezca su src para src de la original, y luego leyendo su ancho Esto debería ser económico ya que el navegador ya debería haber guardado en caché la imagen.

var i = document.getElementById('myimg'); 

var i2 = new Image(); 
i2.onload = function() { 
    alert(i2.width); 
}; 

i2.src = i.src; 

Aquí es un violín: http://jsfiddle.net/baZ4Y/

Answer 2

EDIT: Este método es útil si desea recuperar el tamaño calculado de una imagen después de que se hace en una página, pero antes de transformar su tamaño con escala. Si solo desea el tamaño original de la imagen, use los métodos anteriores.

Intente escribir la escala de la imagen en un atributo de datos cuando lo escala. Luego puede dividir fácilmente las nuevas dimensiones con ese atributo de escala para recuperar el tamaño original. Podría ser algo como esto:

// Set the scale data attribute of the image 
var scale = 2; 
img.dataset.scale = scale; 

... 

// Later, retrieve the scale and calculate the original size of the image 
var s = img.dataset.scale; 
var dimensions = [img.width(), img.height()]; 
var originalDimensions = dimensions.map(function(d) {return d/parseFloat(s)}); 

Como alternativa, sólo puede recuperar la escala de la imagen directamente usando jQuery y expresiones regulares.

var r = /matrix\(([\d.]+),/; 
try { 
    var currentTransform = $swiper.css('transform'); 
    var currentScale = currentTransform.match(r)[1]; 
} 
// Handle cases where the transform attribute is unset 
catch (TypeError) { 
    currentScale = 1; 
} 

Esto tiene sentido más intuitivo para mí que la creación de una imagen completamente nueva y confiando en la memoria caché del navegador para que se cargue rápidamente.