JavaScript：画像のサイズを取得する

95

画像へのURLしかありません。JavaScriptのみを使用してこの画像の高さと幅を決定する必要があります。ページ上でユーザーに画像を表示することはできません。どうすればその寸法を取得できますか？

javascript html image

— JQueeeer
ソース

2

stackoverflow.com/questions/106828/javascript-get-image-height

— stecb

1

画像が読み込まれるまで待たなければならないので、実際にはこの答えは本当に正しい唯一のものです。

— シャドウウィザードはあなたのための耳です

196

var img = new Image();

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

  // code here to use the dimensions
}

img.src = url;

— シュミイ
ソース

1

次元を同期的に取得する必要がある場合を除きます。その場合は、ドキュメントに画像を挿入するだけで（ビューポートの外の絶対位置を使用）、document.appendChild（）を呼び出した直後に寸法が表示されます。

— JustAndrei 2015

1

onload画像のURLを設定するよりも前になぜですか？

— Ajay Gaur

23

@AjayGaur onloadは、画像が正しく読み込まれた場合に非同期で呼び出されるリスナーであるためです。URLの設定後にリスナーを設定すると、コードがonload自体の設定に到達する直前に画像が読み込まれる可能性があり、その結果、リスナーが呼び出されることはありません。アナロジーを使用して、グラスに水を注いでいる場合、最初に水を注ぎ、次にグラスに水を入れますか？または、最初にガラスを入れてから、水を入れますか？

— バイオモルゴス2017

2

img.naturalWidthとimg.naturalHeightは正解です

— Kamlesh

ありがとう@Kamlesh私は自然な次元を必要としていました。

— jahooma

43

新しくする Image

var img = new Image();

をセットする src

img.src = your_src

取得widthし、height

//img.width
//img.height

— nc3b
ソース

17

この正確なコードを使用して、幅と高さを0にしていきます。

— アダムケイシー

11

画像を読み込む必要があるようです。これは理にかなっています。

— アダムケイシー

3

追加情報-これは私にとって初めて機能しましたが、断続的でした。問題は画像がダウンロードされていないためだと思います。次のように、onloadイベントハンドラーでディメンションを使用するコードを実行して修正しました：img.onload = function（）{};

— Shumii

3

このコードは、画像がブラウザのキャッシュにある限り機能します。キャッシュが無効または削除された後。うまくいきません。だから本当に信頼できません。

— bharatesh 16

2

画像はまだ読み込まれていないため、これは機能していません。画像の読み込みは非同期で行われるため、読み込みイベントを待つ必要があります。

— user1702401 2017

5

これは関数を使用し、関数が完了するのを待ちます。

http://jsfiddle.net/SN2t6/118/

function getMeta(url){
    var r = $.Deferred();

  $('<img/>').attr('src', url).load(function(){
     var s = {w:this.width, h:this.height};
     r.resolve(s)
  });
  return r;
}

getMeta("http://www.google.hr/images/srpr/logo3w.png").done(function(test){
    alert(test.w + ' ' + test.h);
});

— デビッドダナム
ソース

1

なぜ、この再利用可能な延期機能付きの関数が反対投票されるのですか？

— DavidDunham 2016

「JavaScriptのみを使用する」これはjQueryだと思います

— Apolo

jQuerryを使用していますが、私から賛成票をいただいています。アプローチはそれが重要です。

— クランクバ

2

naturalWidthと naturalHeight

var img = document.createElement("img");
img.onload = function (event)
{
    console.log("natural:", img.naturalWidth, img.naturalHeight);
    console.log("width,height:", img.width, img.height);
    console.log("offsetW,offsetH:", img.offsetWidth, img.offsetHeight);
}
img.src = "image.jpg";
document.body.appendChild(img);

// css for tests
img { width:50%;height:50%; }

— ビターブルー
ソース

1

入力フォームからの画像ファイルがある場合。このように使えます

let images = new Image();
images.onload = () => {
 console.log("Image Size", images.width, images.height)
}
images.onerror = () => result(true);

let fileReader = new FileReader();
fileReader.onload = () => images.src = fileReader.result;
fileReader.onerror = () => result(false);
if (fileTarget) {
   fileReader.readAsDataURL(fileTarget);
}

— ラカ・アディ・ヌグロホ
ソース

0

ここでJQueryを使用して同様の質問が行われ、回答されました。

URLからリモート画像の幅と高さを取得する

function getMeta(url){
  $("<img/>").attr("src", url).load(function(){
     s = {w:this.width, h:this.height};
     alert(s.w+' '+s.h);      
  }); 
}

getMeta("http://page.com/img.jpg");

— ルーク・ネッパー
ソース

0

jQueryで画像サイズを取得する

function getMeta(url){
    $("<img/>",{
        load : function(){
            alert(this.width+' '+this.height);
        },
        src  : url
    });
}

JavaScriptで画像サイズを取得する

function getMeta(url){   
    var img = new Image();
    img.onload = function(){
        alert( this.width+' '+ this.height );
    };
    img.src = url;
}

JavaScriptを使用して画像サイズを取得する（最新のブラウザー、IE9以降）

function getMeta(url){   
    var img = new Image();
    img.addEventListener("load", function(){
        alert( this.naturalWidth +' '+ this.naturalHeight );
    });
    img.src = url;
}

上記を単に次のように使用します：getMeta（ " http://example.com/img.jpg "）;

https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement

— サニーマハジャン
ソース

-3

次のコードは、ページ上の各画像に画像属性の高さと幅を追加します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function addImgAttributes()
{
    for( i=0; i < document.images.length; i++)
    { 
        width = document.images[i].width;
        height = document.images[i].height;
        window.document.images[i].setAttribute("width",width);
        window.document.images[i].setAttribute("height",height);

    }
}
</script>
</head>
<body onload="addImgAttributes();">
<img src="2_01.jpg"/>
<img src="2_01.jpg"/>
</body>
</html>

— テスター
ソース

13

問題は、ユーザーに画像を表示せずに画像の寸法を取得することでした。画像が表示された後に画像の幅と高さの属性を設定しても、まったく意味がありません。

— Yaroslav Stavnichiy 2013年