画像のサイズを取得する方法
表示されているサイズではなく、画像の本来のサイズを取得したい場合は、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 ) ;
パスから取得
関連記事
- ローカル画像を表示する方法
- ユーザーの端末に保存されているローカル画像を表示します。
- 横幅のリサイズだけ検出する方法
- スマホではURLアドレス欄の表示、非表示によってもリサイズイベントが発生してしまいます。横幅のリサイズだけを検出するには、前回のサイズを記録しておきましょう。
- スクロール中か否かを判定する方法
- ユーザーがスクロール中か否かを判定するには、scrollイベントとsetTimeout()を利用します。
- 動画のサイズを取得する方法
- 動画の本来のサイズを取得するには、video要素のvideoWidthとvideoHeightを参照します。
- ローカル動画を表示する方法
- ユーザーの端末に保存されているローカル動画を表示します。