通过Javascript检查图像大小

我需要通过javascript检查图像的维度（该图像还没有连接到DOM anywhere），并通过图像上的load（）事件进行检查

下面的变量图像包含有效的图像url。 下面的变量SELF包含对该插件的引用

问题是，在load事件中，我无法访问jQuery插件的变量。从load事件外部，我无法访问该事件检查的图像维度

为我提供维度，但无法访问插件范围

            //Find dimensions of image
            var imageTest = new Image(), iWidth, iHeight;
            // just in case it is not already loaded
            $(imageTest).load(function () {
                iWidth = imageTest.width;
                iHeight = imageTest.height;
                alert(iWidth+' x '+iHeight);
                alert(self.data('overlayTypePreview'));
            });
            imageTest.src = image;

允许我访问插件范围，但不能访问图像维度：

            //Find dimensions of image
            var imageTest = new Image(), iWidth, iHeight;
            // just in case it is not already loaded
            $(imageTest).load(function () {
                iWidth = imageTest.width;
                iHeight = imageTest.height;
            });
            imageTest.src = image;

            alert( self.data('overlayTypePreview') ); // <-- gives me the correct data, string 'mainOverlay'
            alert(iWidth+' x '+iHeight); // <-- gives me 'undefined x undefined'

我想我可以设置一个由3个函数组成的系统，将线程相互传递，但是从load事件无法调用jquery插件的实例，对吗？（我不知道用户会将插件实例化为什么，否则我可能会硬编码实例名称，如果我想要更丑陋的解决方案的话）

---

我想我可以在插件内部设置某种类型的图像超时ping:ing，而不是使用load（）事件，但我认为可能有一种我还没有想到的更聪明的方法…

这就是我最终解决它的原因。正如我在第一个问题中所述，要使这一点变得清晰，需要一系列3个函数：

在我的插件中，要绘制图像的预览，我需要调用：

self.data('drawPreview')(self,entityId);

然而，drawPreview函数只会将执行反弹到ISImageRethanOverlay测试

var drawPreview = function(self,entityId){

    self.data('isImageGreaterThanOverlay')(self,entityId,'drawPreview2')

}
this.data('drawPreview',drawPreview);

如果我在drawPreview（）函数中只使用了isImageGreaterThanOverlay（）函数，我可以将isImageGreaterThanOverlay（）righ的所有内容放在上面的drawPreview中，但是因为我希望能够将此测试仪用于其他类似的函数，所以我将它像这样分开

如下图所示，我的tester函数声明一个新映像，然后向该映像附加一个加载事件，然后实际加载映像，这将触发加载事件中的匿名函数

var isImageGreaterThanOverlay = function(self,entityId,destination){
    //Find dimensions of image
    var imageTest = new Image(), iWidth, iHeight;

    $(imageTest).load(function () {
        var iWidth = imageTest.width;
        var iHeight = imageTest.height;

        //find dimensions of overlay
        var myOverlay = self.data('overlayTypePreview');
        oWidth = parseInt( $(self).find(".VanillaGallery-"+myOverlay).css("width").replace('px', '') );
        oHeight = parseInt( $(self).find(".VanillaGallery-"+myOverlay).css("width").replace('px', '') );

        if (iWidth > oWidth || iHeight > oHeight) {
            var isGreater = true;
        }
        else {
            var isGreater = false;
        }

        self.data(destination)(self,entityId,isGreater);

    });

    var entity = self.data('findTheObject')(self,entityId);
    var image = entity['path'];
    imageTest.src = image;

}
this.data('isImageGreaterThanOverlay',isImageGreaterThanOverlay);

这一点很重要，因为当代码试图读取图像的尺寸时，以任何其他方式执行此操作都可能导致图像无法完全加载到浏览器中

在jQuery插件中实现这一点的关键是像karlandré-gagnon在评论中建议的那样，包括对jQuery插件的this的引用。通过该引用，您可以访问插件范围的变量和函数。这是我如何将图像与覆盖大小（存储在插件的变量中）进行比较，以及如何将执行从加载事件的匿名函数传递回插件中的函数

还要确保在load events匿名函数中没有传递THIS引用（在我的例子中是SELF），而是像我所做的那样进行传递，只需将其写入匿名函数中即可

因此，当load events anonymous函数检查完大小后，它会将执行传递给我调用的drawPreview2函数（因为它是我初始drawPreview函数的第二部分，还记得因为异步加载事件，我必须将它拆分）

---

什么是“插件范围”？你是在谈论你的插件的

这个
？是的，我对大多数插件变量（以及函数）使用这个.data（'variable'）。在load函数之外，保存引用：
var self=this。然后，在负载内部，您可以执行
self.imgW=this.width
。该值将保存在插件中。请记住，
load
是异步的。这几乎等同于我在上面发布的window.iWidth选项（尽管您的版本比较干净），并且效果也很差，这意味着我仍然需要某种ping:ing来查看变量实际填充的时间，因为它就像您所说的那样是异步的。不幸的是，它并没有解决问题。你可以编辑插件的代码来满足你的需要，然后添加你的load（）东西。。。？
var isImageGreaterThanOverlay = function(self,entityId,destination){
    //Find dimensions of image
    var imageTest = new Image(), iWidth, iHeight;

    $(imageTest).load(function () {
        var iWidth = imageTest.width;
        var iHeight = imageTest.height;

        //find dimensions of overlay
        var myOverlay = self.data('overlayTypePreview');
        oWidth = parseInt( $(self).find(".VanillaGallery-"+myOverlay).css("width").replace('px', '') );
        oHeight = parseInt( $(self).find(".VanillaGallery-"+myOverlay).css("width").replace('px', '') );

        if (iWidth > oWidth || iHeight > oHeight) {
            var isGreater = true;
        }
        else {
            var isGreater = false;
        }

        self.data(destination)(self,entityId,isGreater);

    });

    var entity = self.data('findTheObject')(self,entityId);
    var image = entity['path'];
    imageTest.src = image;

}
this.data('isImageGreaterThanOverlay',isImageGreaterThanOverlay);

var drawPreview2 = function(self,entityId,isGreater){

    //using the passed in 'isGreater' variable,
    //I do the stuff I need to display the image correctly

}
this.data('drawPreview2',drawPreview2);