Question

我尝试从某些背景图像中获取高度/宽度，但是如何将这些值转换为某些变量？

var bgobj = jQuery(this);  // assigning the object          
    var url = bgobj.css('background-image').replace(/url\(|\)$|"/ig, '');

    var img = new Image();

    img.src = url;

选项1：

    alert('img.width: ' + img.width); // alert: " img.width: 0 "

可能是图片没有加载。所以我尝试onload：选项2：

   jQuery(bgimg).on('load', function() {
            height = jQuery(bgimg).height();  
            //alert('height ' + height); //'480px' which is correct!
    });

无法获得价值以供进一步使用！？所以我尝试回调：选项3：

        var imageSize = function(url, callback) {

            var img = new Image();
            img.onload = function(){

                var response = {};
                var img = new Image();
                img.onload = function() {
                    var x = img.width;
                    var y = img.height;
                    var z = y/x;
                    response = {width:x,height:y};
                    if(callback) callback(response);
                }
                img.src = url;
            }               
            img.onload();               

    }
    var getSize = function(url, callback) {
        imageSize(url, function(response)   {
            var dim = response;
        })
        callback(dim);
    }
    var h;
    imageSize(img.src, function(response) {
            h=response.height;
            //alert(h); // 800px (OK))
    })
    //alert(h);  //undefined    
    //alert(imageSize.height); //undefined
    //alert(imageSize.h); //undefined
    //alert(imageSize.response.h); //undefined

仍无法将值转换为普通变量。我哪里出错了？

Answer 1

您过度复杂了，但选项3是一种方式。

＆＃13;

var imageSize = function(url, callback) {
    var img = new Image();
    img.onload = function(){        
      if(callback) callback(img.width,img.height);    
    }   
    img.src = url;    
}

$(function(){
    var url = $('#foo').css('background-image').replace(/url\(|\)$|"/ig, '');
    imageSize(url,function(w,h){
      alert("width=" + w + ", height=" + h);  
    })
});

＆＃13;

#foo{
  background-image:url(http://lorempixel.com/100/100/)
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">test</div>

＆＃13;

要记住的是方法imageSize是异步的，因此您必须向其传递一个回调，该回调将在图像加载时调用。你不能有另一种方法，你把它当作同步调用，只是不会工作。

从image.onload（function（）返回的值是0还是未定义？

1 个答案: