Ölçeklendirilmiş görüntünün orijinal boyutunu alma

Question

Görüntümün bu gibi bir orijinal, boyutsuz, görüntünün boyutunu nasıl elde edebilirim: <img src="picture.png" style="max-width:100px">?

Ben, özgün genişliği

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

Source

Answer 1

Bir başka görüntü elemanı yaratmaktır yapmanın yolu almak için img.naturalWidth kullanabilirsiniz benim cevap buldu orijinalin src onun src ayarlamak ve sonra genişliğini okuyor. Tarayıcı tarayıcıyı önceden görüntülemiş olması gerektiği için bu ucuz olmalı. İşte

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

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

i2.src = i.src; 

bir keman olduğunu: http://jsfiddle.net/baZ4Y/

Answer 2

DÜZENLEME: Bu yöntem bir sayfada oluşturulduktan sonra bir resmin bilgisayarlı boyutunu almak istiyorsanız kullanışlıdır, ancak onun büyüklüğü dönüşümü önce ölçeği. Görüntünün yalnızca orijinal boyutunu istiyorsanız, yukarıdaki yöntemleri kullanın.

Resmi büyütmek için resmin ölçeğini bir veri özelliğine yazmayı deneyin. Daha sonra, orijinal boyutu almak için yeni boyutları bu ölçek özniteliğine kolayca bölebilirsiniz. Böyle görünebilir:

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

Alternatif olarak, sadece doğrudan jQuery ve regex kullanarak görüntünün ölçeğini alabilirsiniz.

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

Bu tamamen yeni bir görüntü oluştururken ve hızla yüklenmesi tarayıcının önbelleğe alma güvenmek yerine bana daha sezgisel mantıklı.