web-dev-qa-db-ja.com

jqueryで画像の「naturalWidth」を読み取る方法はありますか?

私はこのようなもので試しました:

var Height = $(this).naturalHeight;

しかし、それは機能しません。それを行う方法はありますか

グリーズ

17
ValiL

JQueryを適用してからjQueryを削除した後、ネイティブのjavascriptプロパティを使用します

.naturalWidth/.naturalHeight

私が使用するjQueryオブジェクトで

var width = this.naturalWidth; 
var height = this.naturalHeight;

または

var width = $("selector").get(0).naturalWidth; 
var height = $("selector").get(0).naturalHeight;

jQueryオブジェクトが選択されていない場合。

jQueryオブジェクトでget(0)を使用すると、関連するDOM要素にアクセスできます 。ネイティブDOM要素では、ネイティブjavascriptコードを操作できます(ここでは、nativ javascript属性.naturalWidthにアクセスします)

42
Ruwen

受け入れられた解決策がオブジェクトの外観を変更するように私には見えます。時折、jQueryは少し役に立ちすぎて、邪魔にならないように指示する必要があります。 naturalWidthまたはnaturalHeightを使用する場合は、jQueryオブジェクトをネイティブのブラウザー要素参照に変換することにより、既存のものを使用します。

var Height = document.getElementById($(this).attr("id")).naturalHeight;
8
Geordie Korper

画像のサイズを取得する1つの方法は、JavaScriptを使用して画像のコピーを動的にロードし、そのサイズを取得することです。

// preload the image
var height, width = '';
var img = new Image();
var imgSrc = '/path/to/image.jpg';

$(img).load(function () {
    alert('height: ' + img.height);
    alert('width: ' + img.width);
    // garbage collect img
    delete img;
}).error(function () {
    // image couldnt be loaded
    alert('An error occurred and your image could not be loaded.  Please try again.');
}).attr({ src: imgSrc });
3
Corey Ballou

これは、大きな画像でも古いIEバージョンで機能するjQuery関数の例です。

/*
 * NaturalWith calculation function. It has to be async, because sometimes(e.g. for IE) it needs to wait for already cached image to load.
 * @param onNaturalWidthDefined callback(img) to be notified when naturalWidth is determined.
 */
jQuery.fn.calculateNaturalWidth = function(onNaturalWidthDefined) {
    var img = this[0];
    var naturalWidth = img.naturalWidth;
    if (naturalWidth) {
        onNaturalWidthDefined(img);
    } else { //No naturalWidth attribute in IE<9 - calculate it manually.
        var newImg = new Image();
        newImg.src = img.src;
        //Wait for image to load
        if (newImg.complete) {
            img.naturalWidth = newImg.width;
            onNaturalWidthDefined(img);
        } else {
            $(newImg).load(function() {img.naturalWidth=newImg.width; onNaturalWidthDefined(img)});
        }
    }
};

使い方は簡単です:

$(img).calculateNaturalWidth(function(img) { alert(img.naturalWidth)});
2
ejboy

試してみます

var width = $("img", this).css('width', 'auto').width();
var height= $("img", this).css('height', 'auto').height();

とにかく基本的にnaturalWidthnaturalHeightの計算です

1
Tim

ソースから [〜#〜]ここ[〜#〜]

これは、naturalWidth()とnaturalHeight()の2つのメソッドを追加する短いjQuery(任意のバージョン)プラグインです。分岐を使用して、naturalWidthとnaturalHeightがブラウザでサポートされているかどうかを判断します。サポートされている場合、メソッドはnaturalWidthまたはnaturalHeightプロパティのゲッターになります。サポートされていない場合、メソッドは新しいスタイルなしの画像要素を作成し、その要素の実際の幅と高さを返します。

  // adds .naturalWidth() and .naturalHeight() methods to jQuery
  // for retreaving a normalized naturalWidth and naturalHeight.
  (function($){
    var
    props = ['Width', 'Height'],
    prop;

    while (prop = props.pop()) {
    (function (natural, prop) {
      $.fn[natural] = (natural in new Image()) ? 
      function () {
      return this[0][natural];
      } : 
      function () {
      var 
      node = this[0],
      img,
      value;

      if (node.tagName.toLowerCase() === 'img') {
        img = new Image();
        img.src = node.src,
        value = img[prop];
      }
      return value;
      };
    }('natural' + prop, prop.toLowerCase()));
    }
  }(jQuery));

  // Example usage:
  var 
  nWidth = $('img#example').naturalWidth(),
  nHeight = $('img#example').naturalHeight();
1
Syed

最善の方法は、幅と高さを設定せずに画像を非表示にし、この画像の画像ソースを元の画像として使用することです。次に、この非表示の画像の寸法を計算します。

または、サーバー側で物理的な寸法を計算し、それをページの非表示要素に渡して、その非表示要素の値からサイズを取得することもできます。

1
rahul