Czy możemy uzyskać rzeczywisty rozmiar obrazu poprzez płótno?

Question

W tagach graficznych, jeśli nie dostarczymy właściwości width i height, nic nie dostaniemy podczas pobierania szerokości i wysokości obrazu. Używam elementu canvas, aby załadować obraz i skalować go proporcjonalnie. Aby to zrobić, muszę uzyskać rzeczywisty rozmiar obrazu. Czy można to zrobić w html 5?

Answer 1

Niezupełnie zrozumiałe twoje pytanie.

Ale można użyć javascript, aby uzyskać szerokość i wysokość obrazu.

a następnie przekazać go do

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

podczas rysowania obrazu na płótnie.

lub sprawdzić, czy to pomaga

http://jsfiddle.net/jjUHs/

Answer 2

jeśli cię rozumiem poprawnie, można użyć metody getComputedStyle.

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

Answer 3

HTMLImageElement dwie właściwości tego, naturalWidth i naturalHeight. Użyj ich.

Jak w:

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 

dobrze jest ustawić źródło dopiero po słuchacz zdarzenie jest zdefiniowane, patrz eksploracji Phrogz jest na tym tutaj: Should setting an image src to data URL be available immediately?

Answer 4

Nie można odzyskać szerokość/wysokość, zanim obraz został załadowany.

Spróbuj coś takiego:

// 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"; 

Byle onload nie zadziała, jeśli obraz został załadowany przed wykonaniem skryptu. Ostatecznie możesz osadzić skrypt w html <img src="test.jpg" onload="something()">