Chúng ta có thể nhận được kích thước hình ảnh thực thông qua canvas không?

Question

Trong thẻ hình ảnh, nếu chúng tôi không cung cấp thuộc tính chiều rộng và chiều cao, chúng tôi sẽ không nhận được gì khi truy xuất chiều rộng và chiều cao của hình ảnh. Tôi đang sử dụng phần tử canvas để tải hình ảnh và tỷ lệ tương ứng. Để làm được điều này, tôi phải có kích thước hình ảnh thực tế. Có thể làm điều đó trong html 5 không?

Answer 1

Không hiểu đầy đủ câu hỏi của bạn.

Nhưng bạn có thể sử dụng javascript để có chiều rộng và chiều cao của hình ảnh.

và sau đó vượt qua nó vào

/Five arguments: the element, destination (x,y) coordinates, and destination 
// width and height (if you want to resize the source image). 
context.drawImage(img_elem, dx, dy, dw, dh); 

khi vẽ hình ảnh trên vải.

hoặc kiểm tra điều này nếu nó giúp

http://jsfiddle.net/jjUHs/

Answer 2

nếu tôi hiểu bạn một cách chính xác, bạn có thể sử dụng phương pháp getComputedStyle.

var object = document.getElementById(el); 
var computedHeight = document.defaultView.getComputedStyle(object, "").getPropertyValue("width"); 

Answer 3

Các HTMLImageElement có hai thuộc tính cho điều này, naturalWidth và naturalHeight. Sử dụng chúng.

Như trong:

var img = new Image(); 

img.addEventListener('load', function() { 
    // once the image is loaded: 
    var width = img.naturalWidth; // this will be 300 
    var height = img.naturalHeight; // this will be 400 
    someContext.drawImage(img, 0, 0, width, height); 
}, false); 

img.src = 'http://placekitten.com/300/400'; // grab a 300x400 image from placekitten 

Đó là khôn ngoan để thiết lập nguồn duy nhất sau khi lắng nghe sự kiện được định nghĩa, xem thăm dò Phrogz về đó ở đây: Should setting an image src to data URL be available immediately?

Answer 4

Bạn không thể lấy chiều rộng/chiều cao trước khi hình ảnh đã được nạp vào.

Hãy thử một cái gì đó như:

// create new Image or get it right from DOM, 
// var img = document.getElementById("myImage"); 
var img = new Image(); 

img.onload = function() { 
    // this.width contains image width 
    // this.height contains image height 
} 

img.src = "image.png"; 

Nhưng dù sao onload sẽ không cháy nếu hình ảnh đã được tải trước khi thực hiện kịch bản. Cuối cùng, bạn có thể nhúng tập lệnh vào html <img src="test.jpg" onload="something()">