キャンバスを通して実際の画像サイズを取得できますか？

Question

画像タグでwidthとheightプロパティを指定しないと、画像の幅と高さを取得するときに何も取得されません。キャンバス要素を使用して画像をロードし、それに比例して拡大/縮小します。これを行うには、実際の画像サイズを取得する必要があります。 html5でそれを行うことは可能ですか？

Answer 1

あなたの質問を完全に理解していません。

しかし、javascriptを使用して画像の幅と高さを取得することができます。次いで

、キャンバス上の画像を描きながら

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

に渡します。

か、それは私が正しくあなたを理解していれば、あなたはgetComputedStyleメソッドを使用することができます

http://jsfiddle.net/jjUHs/

Answer 2

を助けている場合、これを確認してください。

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

Answer 3

HTMLImageElementこのための2つの特性、naturalWidthnaturalHeightとを有しています。それらを使用してください。

のように：

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 

ここでその上Phrogzの探査を参照して、イベントリスナーが定義された後にのみ、ソースを設定するのが賢明です：Should setting an image src to data URL be available immediately?

Answer 4

画像がされている前に、幅/高さを取得することはできません。ロードされる。画像は、スクリプトの実行前にロードされている場合はとにかくonloadイベントが発生しません

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

：

のようなものを試してみてください。最終的には、スクリプトをHTMLに埋め込むことができます<img src="test.jpg" onload="something()">