JavaScriptを使用して画像サイズ（高さと幅）を取得する方法

ページ上の画像のサイズを取得するためのJavaScriptまたはjQuery APIまたはメソッドはありますか？

プログラムで画像を取得し、JavaScriptを使用して寸法を確認できます...

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

これは、画像がマークアップの一部でない場合に役立ちます。

clientWidthとclientHeightは、DOM要素の内側の寸法（マージンと境界を除く）の現在のブラウザー内サイズを示すDOMプロパティです。したがって、IMG要素の場合、これは可視画像の実際の寸法を取得します。

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

また、（レックスとイアンの答えに加えて）あります：

imageElement.naturalHeight

そして

imageElement.naturalWidth

これらは、（画像要素だけでなく）画像ファイル自体の高さと幅を提供します。

jQueryを使用していて、画像サイズをリクエストしている場合は、それらが読み込まれるか、ゼロしか取得されなくなるまで待つ必要があります。

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

これらの回答の更新は有用だclientWidthと思います。最も投票された返信の1つは、clientHeightの使用を提案しているためです。

実際にどの値が返されるかを確認するために、HTML5でいくつかの実験を行いました。

まず、Dashというプログラムを使用して画像APIの概要を取得しました。その状態heightとwidth画像の描画時の高さ/幅であるとことnaturalHeightとnaturalWidth、画像の固有の高さ/幅である（そして唯一のHTML5である）を。

高さ300、幅400のファイルから、美しい蝶の画像を使用しました。そして、このJavascript：

var img = document.getElementById("img1");

console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

次に、高さと幅にインラインCSSを使用して、このHTMLを使用しました。

<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

結果：

/*Image Element*/ height == 300         width == 400
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

次に、HTMLを次のように変更しました。

<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

つまり、インラインスタイルではなく高さと幅の属性を使用する

結果：

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() ==  90       width() == 115

/*Actual Rendered size*/     90                  115

次に、HTMLを次のように変更しました。

<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

つまり、属性とCSSの両方を使用して、どちらが優先されるかを確認します。

結果：

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

JQueryを使用してこれを行います。

var imgWidth = $("#imgIDWhatever").width();

他のすべてが忘れていることは、ロードする前に画像サイズを確認できないことです。作成者が投稿されたすべてのメソッドをチェックすると、おそらくlocalhostでのみ機能します。ここではjQueryを使用できるため、画像が読み込まれる前に「準備完了」イベントが発生することに注意してください。$（ '＃xxx'）。width（）および.height（）は、onloadイベント以降で発生する必要があります。

実際にロードが完了するまで画像のサイズはわからないため、実際にこれを実行できるのは、ロードイベントのコールバックを使用する場合のみです。以下のコードのようなもの...

var imgTesting = new Image();

function CreateDelegate(contextObject, delegateMethod)
{
    return function()
    {
        return delegateMethod.apply(contextObject, arguments);
    }
}

function imgTesting_onload()
{
    alert(this.width + " by " + this.height);
}


imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';

jQueryの library-

とを使用.width()し.height()ます。

もっとにおけるjQueryの幅とjQueryのheigth。

コード例

$(document).ready(function(){
    $("button").click(function()
    {
        alert("Width of image: " + $("#img_exmpl").width());
        alert("Height of image: " + $("#img_exmpl").height());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg">
<button>Display dimensions of img</button>

ファイルを読み込む前に次のステートメントが呼び出されていたため、プロパティを確認する前に画像をロードできるようにソースコードを改善したと思います。ブラウザ。jqueryが必要...

function getImgSize(imgSrc){
    var newImg = new Image();
    newImg.src = imgSrc;
    var height = newImg.height;
    var width = newImg.width;
    p = $(newImg).ready(function(){
        return {width: newImg.width, height: newImg.height};
    });
    alert (p[0]['width']+" "+p[0]['height']);
}

と仮定すると、 <img id="an-img" src"...">

// Query after all the elements on the page have loaded.
// Or, use `onload` on a particular element to check if it is loaded.
document.addEventListener('DOMContentLoaded', function () {
  var el = document.getElementById("an-img");

  console.log({
    "naturalWidth": el.naturalWidth, // Only on HTMLImageElement
    "naturalHeight": el.naturalHeight, // Only on HTMLImageElement
    "offsetWidth": el.offsetWidth,
    "offsetHeight": el.offsetHeight
  });

自然な大きさ

el.naturalWidthそしてel.naturalHeight私たちになります自然な寸法、画像ファイルのサイズを。

レイアウト寸法

el.offsetWidthそしてel.offsetHeight私たちの要素は、文書上でレンダリングされた寸法を取得します。

実際の画像サイズを使用する前に、ソース画像をロードする必要があります。JQueryフレームワークを使用すると、簡単な方法で実際の画像サイズを取得できます。

$("ImageID").load(function(){
  console.log($(this).width() + "x" + $(this).height())
})

この答えはまさに私が（jQueryで）探していたものでした：

var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');

プロミスのimageDimensions()使用を恐れない場合は、次のような単純な関数を使用できます。

// helper to get dimensions of an image
const imageDimensions = file => new Promise((resolve, reject) => {
    const img = new Image()

    // the following handler will fire after the successful parsing of the image
    img.onload = () => {
        const { naturalWidth: width, naturalHeight: height } = img
        resolve({ width, height })
    }

    // and this handler will fire if there was an error with the image (like if it's not really an image or a corrupted one)
    img.onerror = () => {
        reject('There was some problem with the image.')
    }
    
    img.src = URL.createObjectURL(file)
})

// here's how to use the helper
const getInfo = async ({ target: { files } }) => {
    const [file] = files
 
    try {
        const dimensions = await imageDimensions(file)
        console.info(dimensions)
    } catch(error) {
        console.error(error)
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>

Select an image:
<input
  type="file"
  onchange="getInfo(event)"
/>
<br />
<small>It works offline.</small>

jQuery回答：

$height = $('#image_id').height();
$width  = $('#image_id').width();

これは、2019でJavaScriptやTypescriptを使用している人にとって役立つかもしれないと思いました。

一部が示唆したように、私は以下が間違っていることがわかりました：

let img = new Image();
img.onload = function() {
  console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";

これは正しいです：

let img = new Image();
img.onload = function() {
  console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg";

結論：

関数imgではthis、ではなく、を使用しonloadます。

最近、フレックススライダーのエラーで同じ問題が発生しました。読み込み遅延のため、最初の画像の高さが低く設定されました。その問題を解決するために次の方法を試してみましたが、うまくいきました。

// create image with a reference id. Id shall be used for removing it from the dom later.
var tempImg = $('<img id="testImage" />');
//If you want to get the height with respect to any specific width you set.
//I used window width here.
tempImg.css('width', window.innerWidth);  
tempImg[0].onload = function () {
    $(this).css('height', 'auto').css('display', 'none');
    var imgHeight = $(this).height();
    // Remove it if you don't want this image anymore.
    $('#testImage').remove();
}
//append to body
$('body').append(tempImg);
//Set an image url. I am using an image which I got from google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';

これにより、元の幅やゼロではなく、設定した幅を基準とした高さが得られます。

次のものも使用できます。

var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;

ニッキー・デ・マイヤーは背景写真を尋ねました。私は単にCSSからそれを取得し、「url（）」を置き換えます：

var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
  console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}

次のようにjsまたはjqueryでページが読み込まれるときに、onloadハンドラープロパティを適用できます。

$(document).ready(function(){
   var width = img.clientWidth;
   var height = img.clientHeight;

 });

簡単に言うと、このようにテストできます。

  <script>
  (function($) {
        $(document).ready(function() {
            console.log("ready....");
            var i = 0;
            var img;
            for(i=1; i<13; i++) {
                img = new Image();
                img.src = 'img/' + i + '.jpg';
                console.log("name : " + img.src);
                img.onload = function() {
                    if(this.height > this.width) {
                        console.log(this.src + " : portrait");
                    }
                    else if(this.width > this.height) {
                        console.log(this.src + " : landscape");
                    }
                    else {
                        console.log(this.src + " : square");
                    }
                }
            }
        });
    }(jQuery));
  </script>

var img = document.getElementById("img_id");
alert( img.height + " ;; " + img .width + " ;; " + img .naturalHeight + " ;; " + img .clientHeight + " ;; " + img.offsetHeight + " ;; " + img.scrollHeight + " ;; " + img.clientWidth + " ;; " + img.offsetWidth + " ;; " + img.scrollWidth )
//But all invalid in Baidu browser  360 browser ...

ブラウザが解釈した設定を親divから削除することが重要です。したがって、実際の画像の幅と高さが必要な場合は、

$('.right-sidebar').find('img').each(function(){
    $(this).removeAttr("width");
    $(this).removeAttr("height");
    $(this).imageResize();
});

これは私からのTYPO3プロジェクトの例の1つで、正しい関係で拡大縮小するために画像の実際のプロパティが必要です。

var imgSrc, imgW, imgH;
function myFunction(image){
    var img = new Image();
    img.src = image;
    img.onload = function() {   
        return {
            src:image,
            width:this.width,
            height:this.height};
        }
    return img;
}
var x = myFunction('http://www.google.com/intl/en_ALL/images/logo.gif');
    //Waiting for the image loaded. Otherwise, system returned 0 as both width and height.
x.addEventListener('load',function(){
    imgSrc = x.src;
    imgW = x.width;
    imgH = x.height;
});
x.addEventListener('load',function(){
    console.log(imgW+'x'+imgH);//276x110
});
console.log(imgW);//undefined.
console.log(imgH);//undefined.
console.log(imgSrc);//undefined.

これは私の方法です、これが役に立てば幸いです。:)

function outmeInside() {
var output = document.getElementById('preview_product_image');

 if (this.height < 600 || this.width < 600) {
     output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
     alert("The image you have selected is low resloution image.Your image width=" + this.width + ",Heigh=" + this.height + ". Please select image greater or equal to 600x600,Thanks!");
 } else {
     output.src = URL.createObjectURL(event.target.files[0]);

 }
 return;

 }

 img.src = URL.createObjectURL(event.target.files[0]);
}

これは、複数の画像のプレビューとアップロードに使用できます。画像ごとに1つずつ選択する必要がある場合。次に、すべてのプレビュー画像機能にコピーして貼り付け、検証します!!!

要素の属性を取得する前に、ドキュメントページがオンロードされている必要があります。

window.onload=function(){
    console.log(img.offsetWidth,img.offsetHeight);
}

正しいファイルを選択したときにinput要素によって取得されたimgファイルオブジェクトを渡すだけで、画像のネットワークの高さと幅が得られます

function getNeturalHeightWidth(file) {
     let h, w;
     let reader = new FileReader();
      reader.onload = () => {
        let tmpImgNode = document.createElement("img");
        tmpImgNode.onload = function() {
          h = this.naturalHeight;
          w = this.naturalWidth;
        };
        tmpImgNode.src = reader.result;
      };
      reader.readAsDataURL(file);
    }
   return h, w;
}