Lấy kích thước ban đầu của hình ảnh được chia tỷ lệ

Question

Làm cách nào để có được kích thước ban đầu, chưa bị lệch kích thước của hình ảnh từ javascript nếu hình ảnh của tôi giống như sau: <img src="picture.png" style="max-width:100px">?

Tôi tìm thấy câu trả lời của tôi, bạn có thể sử dụng img.naturalWidth để có được chiều rộng ban đầu

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

Source

Answer 1

Một cách để làm điều đó là để tạo ra một yếu tố hình ảnh, thiết lập src của nó để src của bản gốc, và sau đó đọc chiều rộng của nó. Điều này sẽ không tốn kém vì trình duyệt nên đã lưu trữ hình ảnh.

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

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

i2.src = i.src; 

Đây là một fiddle: http://jsfiddle.net/baZ4Y/

Answer 2

EDIT: Phương pháp này rất hữu ích nếu bạn muốn lấy kích thước tính toán của một hình ảnh sau khi được trả lại trên một trang, nhưng trước khi bạn thay đổi kích thước của nó với tỉ lệ. Nếu bạn chỉ muốn kích thước ban đầu của hình ảnh, hãy sử dụng các phương pháp trên.

Hãy thử viết tỷ lệ của hình ảnh thành thuộc tính dữ liệu khi bạn mở rộng quy mô. Sau đó, bạn có thể dễ dàng chia các thứ nguyên mới theo thuộc tính tỷ lệ đó để truy lục kích thước ban đầu. Nó có thể trông giống như sau:

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

Hoặc, bạn chỉ có thể truy xuất tỷ lệ của hình ảnh trực tiếp bằng jQuery và 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; 
} 

Điều này tạo cảm giác trực quan hơn với tôi hơn là tạo hình ảnh hoàn toàn mới và dựa vào bộ nhớ đệm của trình duyệt để tải nhanh.