28

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

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

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

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

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

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

4

3 に答える 3

5

私が作成した次の関数を使用できます。

関数

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
于 2015-12-01T14:36:59.727 に答える