2

画像のサイズを検出する関数があり、幅と高さの両方を含むオブジェクトを返したいと思っています。以下のコードでは、関数内のsz.width と sz.heightが値を保持していますが、それらが値を返した後は未定義です。私は何が欠けていますか？

     function getImgSize(imgSrc) {
        var newImg = new Image();

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

          function s() {}
          sz = new s();
          sz.width = width;
          sz.height = height;
          $('#infunc').text("in function, w = "+sz.width+", h = "+sz.height);
          return sz;
        }
        newImg.src = imgSrc; // this must be done AFTER setting onload
      }

var sz = getImgSize("http://lorempixel.com/output/fashion-q-c-1920-1920-4.jpg");
$('#outfunc').text("outside function, w = "+sz.width+", h = "+sz.height);

jsfiddle: http://jsfiddle.net/forgetcolor/LbxA3/

4

2 に答える 2

3

この関数getImgSizeは、画像の読み込みを設定してから終了します。その後、画像が読み込まれると、匿名の onload 関数が呼び出され、サイズが正しく計算され、それが気にしない DOM エンジンに返されます...

どうすればやりたいことができるのか、疑問に思っていることでしょう。簡単な答え: できません。これがあなたが得ることができる最も近いものです：

  function getImgSize(imgSrc, callback) {
    var newImg = new Image();

    newImg.onload = function() {
      ... // blah-blah blah
      callback(sz);
    }
    newImg.src = imgSrc;
  }
  getImgSize("http://lorempixel.com/output/fashion-q-c-1920-1920-4.jpg",
            function(sz) {
              $('#outfunc').text("in callback, w = "+sz.width+
                                 ", h = "+sz.height);
            });

私は実際にここに書きに来ました：

// これは onload を設定した後に行う必要があります

それがあなたの問題だったと思います。// これは onload を設定した後に行う必要があります

于 2012-05-22T01:51:09.693 に答える
2

それはできません。非同期呼び出しの戻り値を取得しようとしています。

検討：

var i = 0;
setTimeout(function() { i = 1; }, 1000); //1 second later
alert(i);

0値はすぐには変更されず、1 秒で変更されるため、アラートが表示されます。

私を信じないの？

あなたがやろうとしていることは同じことです。まだ発生していない値を使用することはできません。目的を達成するには、コールバックを使用する必要があります。

于 2012-05-22T01:51:01.110 に答える