SYNCERのロゴ
アイキャッチ画像

画像のサイズを取得する方法

表示されているサイズではなく、画像の本来のサイズを取得したい場合は、img要素のnaturalWidthとnaturalHeightを参照しましょう。

サンプルコード

画像の読み込みが完全に完了していないとnaturalWidth、naturalHeightの値は取得できません。読み込みが完了してから処理が実行されるよう、工夫して下さい。

img要素から取得

<img src="image.png" id="target">
var element = document.getElementById( "target" ) ;

var intervalId = setInterval( function () {
	if ( element.complete ) {
		var width = element.naturalWidth ;
		var height = element.naturalHeight ;

		clearInterval( intervalId ) ;
	}
}, 500 ) ;

パスから取得

サーバー上のURLアドレス、ローカル環境のBlob URLからサイズを取得できます。

var path = "./image.png" ;

var element = new Image() ;

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

element.src = path ;

デモ

img要素から取得

// <img src="image.png" id="target">
var element = document.getElementById( "target" ) ;

var intervalId = setInterval( function () {
	if ( element.complete ) {
		var width = element.naturalWidth ;
		var height = element.naturalHeight ;

		clearInterval( intervalId ) ;
	}
}, 500 ) ;

width =
height =

パスから取得

var path = "./image.png" ;

var element = new Image() ;

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

element.src = path ;

path = ./image.png
width =
height =

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年7月31日 (月)
コンテンツを公開しました。