bugfix> javascript > 投稿

私は取る関数が必要です URL として argument 一部に image 、および同期的に returns the resolution 。画像が取得されている間、関数を単純にハングさせたい。

それらの線に沿った何か:

function getImageDimensions(imageData) {
    $("body").append("<img id='hiddenImage' src='" + imageData />"');
    /* Wait until image is loaded */
    var width = $('#hiddenImage').width();
    var height = $('#hiddenImage').height();
    $('#hiddenImage').remove();
    return width;
}

回答 3 件
  • 編集する私はこれが完全に恋しいです。コードを内部に移動するだけでそれを行うことができます $img.on('load', function() {...} 以下のように。

    function getImageDimensions(imageData) {
      var $img = $(`<img id='hiddenImage' src='${imageData}' />`);
      
      $img.on('load', function() {
        /* Wait until image is loaded */
        var width = $('#hiddenImage').width();
        var height = $('#hiddenImage').height();
        $('#hiddenImage').remove();
        alert('width = ' + width);
        console.log(width);
      });
      
      $("body").append($img);
    }
    getImageDimensions(`https://i.stack.imgur.com/L6RvS.png?s=48&g=1`);
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    
    


    あるいは 同期させようとするのではなく、作ってみませんか async 。関数を次のように更新します async 返す Promise そして resolve それはいつ img です loaded

    コール getImageDimensions 別から async 機能と使用 await getImageDimensions すぐ下に私はそれをやった test

    async function getImageDimensions(imageData) {
      return new Promise((resolve) => {
        var $img = $(`<img id='hiddenImage' src='${imageData}' />`);
        $img.on('load', function() {
        /* Wait until image is loaded */      
          var width = $('#hiddenImage').width();
          var height = $('#hiddenImage').height();
          $('#hiddenImage').remove();
          alert('width = ' + width);
          resolve(width);
        });
        $("body").append($img);
      });
    }
    async function test() {
      let a = await getImageDimensions(`https://i.stack.imgur.com/L6RvS.png?s=48&g=1`);
      console.log(a);
    }
    test();
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    
    


    または、代わりにあなたは使うことができます Promisethen そして resolve それから onload その後 callback 関数が呼び出されます then 。したがって、次のように機能します synchronous コード。あなたは後に行われるべきコードを書くことができます img 内部にロードされます then

    function getImageDimensions(imageData) {
      new Promise((resolve) => {
        var $img = $(`<img id='hiddenImage' src='${imageData}' />`);
        $img.on('load', function() {
          resolve($img);
        });
        $("body").append($img);
      }).then((result) => {
        /* Wait until image is loaded */
        var width = $('#hiddenImage').width();
        var height = $('#hiddenImage').height();
        $('#hiddenImage').remove();
        alert('width = ' + width);
        console.log(width);
      });
    }
    getImageDimensions(`https://i.stack.imgur.com/L6RvS.png?s=48&g=1`);
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    
    

  • あなたはそのようなことをすることができます:

    function getImageDimensions(imageData) {    
      var image = new Image();
      image.onload = function(data){
        var width = data.target.width;
        return width;
      }
      image.src = imageData;
    }
    
    

  • 関数は複数の値を返すことはできません。ただし、複数の値を含む配列を返すことにより、同様の結果を得ることができます。値の配列を返すことができます。

    function getImageDimensions(imageData) {
        $("body").append("<img id='hiddenImage' src='" + imageData />"');
        /* Wait until image is loaded */
        var width = $('#hiddenImage').width();
        var height = $('#hiddenImage').height();
        $('#hiddenImage').remove();
        var size = [width, height];
        return size;
    }
    
    

    または、アクセスとメンテナンスを簡単にするために、返された各値にラベルを付ける場合は、オブジェクトを返すこともできます

    function getImageDimensions(imageData) {
        $("body").append("<img id='hiddenImage' src='" + imageData />"');
        /* Wait until image is loaded */
        var width = $('#hiddenImage').width();
        var height = $('#hiddenImage').height();
        $('#hiddenImage').remove();
        var size = {
            width: width,
            height: height        
        };
        return size;
    }
    
    

あなたの答え