Come ottenere la dimensione originale di un'immagine in scala

Question

Come posso ottenere la dimensione originale, non ridimensionata di un'immagine da javascript se la mia immagine è simile a questa: <img src="picture.png" style="max-width:100px">?

ho trovato la mia risposta, è possibile utilizzare img.naturalWidth per ottenere la larghezza originale

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

Source

Answer 1

Un modo per farlo è quello di creare un altro elemento di immagine, impostare la sua src alla src dell'originale, e poi leggendo la sua larghezza. Questo dovrebbe essere poco costoso in quanto il browser dovrebbe avere già memorizzato nella cache l'immagine.

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

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

i2.src = i.src; 

Ecco un violino: http://jsfiddle.net/baZ4Y/

Answer 2

EDIT: Questo metodo è utile se si desidera recuperare la dimensione calcolato di un'immagine dopo che è stato eseguito il rendering di una pagina, ma prima di trasformare la sua dimensione con scala. Se vuoi solo la dimensione originale dell'immagine, usa i metodi sopra.

Provare a scrivere la scala dell'immagine su un attributo di dati quando si ridimensiona. Quindi puoi dividere facilmente le nuove dimensioni con quell'attributo di scala per recuperare la dimensione originale. Potrebbe sembrare qualcosa di simile:

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

In alternativa, si può semplicemente recuperare la scala dell'immagine direttamente utilizzando jQuery e regex.

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

questo ha un senso più intuitivo per me rispetto alla creazione di un'immagine completamente nuova e basandosi sul caching del browser che si carichi velocemente.