web-dev-qa-db-ja.com

JavaScriptまたはjqueryを使用して画像の自然なサイズを取得するにはどうすればよいですか？

私はこれまでにこのコードを持っています：

var img = document.getElementById('draggable');
var width = img.clientWidth;
var height = img.clientHeight;

ただし、これによりhtml属性-cssスタイルが取得されます。ファイルの実際の画像リソースのサイズを取得したいのですが。

これが必要なのは、画像をアップロードすると、幅が0pxに設定され、これが発生する理由や場所がわからないためです。それを防ぐために、実際の寸法を取得してリセットします。これは可能ですか？

編集：naturalWidthを取得しようとしても、結果として0になります。写真を追加しました。奇妙なのは、新しいファイルをアップロードしたときにのみ発生し、更新時に正常に機能することです。

http://oi39.tinypic.com/3582xq9.jpg

javascriptjqueryimagedimensions
26
user1848605

naturalWidthとnaturalHeightを使用できます。これらのプロパティには、変更されていない実際の画像の幅と高さが含まれますが、画像が読み込まれるまで待たなければなりません。

var img = document.getElementById('draggable');

img.onload = function() {
    var width  = img.naturalWidth;
    var height = img.naturalHeight;
}

これはIE9以降でのみサポートされています。古いブラウザーをサポートする必要がある場合は、新しい画像を作成し、ソースを同じ画像に設定します。画像のサイズを変更しない場合は、画像が自然に返されます他のサイズが指定されていない場合のデフォルトであるため、サイズ

var img     = document.getElementById('draggable'),
    new_img = new Image();

new_img.onload = function() {
    var width  = this.width,
        heigth = this.height;
}

new_img.src = img.src;

[〜＃〜]フィドル[〜＃〜]

46
adeneo

がある img.naturalHeightおよびimg.naturalWidthは、DOM要素ではなく、画像自体の幅と高さを示します。

18
mash

私が作った以下の機能が使えます。

関数

function getImageDimentions(imageNode) {
  var source = imageNode.src;
  var imgClone = document.createElement("img");
  imgClone.src = source;
  return {width: imgClone.width, height: imgClone.height}
}

html：

<img id="myimage" src="foo.png">

このように使います

var image = document.getElementById("myimage"); // get the image element
var dimentions = getImageDimentions(image); // get the dimentions
alert("width: " + dimentions.width + ", height: " + dimentions.height); // give the user a visible alert of the dimentions
5
nathnolt