通过 Javascript 检查图像大小

Question

我需要通过 javascript 检查图像的尺寸（图像尚未在任何地方附加到 DOM），并通过图像上的 load() 事件来完成。

下面的变量 IMAGE 包含一个有效的图像 url。 下面的变量 SELF 包含对插件 THIS 的引用。

问题是在加载事件中我无法访问我的 jQuery 插件的变量。在加载事件之外，我无权访问该事件检查的图像尺寸。

给我尺寸，但不能访问插件范围

            //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'

我还尝试了通过窗口的丑陋黑客解决方案，但这对我也不起作用，可能是因为代码应该在加载事件之前触发警报？

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

            alert(window.iWidth+' x '+window.iHeight);

我想我可以建立一个由 3 个函数组成的系统，将线程相互传递，但是从加载事件中无法调用我的 jquery-plugin 实例，对吧？ （看到我不知道用户会将插件实例化为什么，否则我可以硬编码实例名称，如果我想要一个更丑陋的解决方案）。

我想我可以从插件内部设置某种超时 ping:ing 图像，而不是使用 load() 事件，但我认为可能有一种我还没有想到的更聪明的方法。 ..

Answer 1

这就是我最终解决它的方式。就像我在最初的问题中所说的那样，需要一系列 3 个函数来使这个干净：

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

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

但是，drawPreview 函数只会将执行反弹到 isImageGreaterThanOverlay 测试

var drawPreview = function(self,entityId){

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

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

如果我只对 drawPreview() 函数使用 isImageGreaterThanOverlay() 函数，我可以将 isImageGreaterThanOverlay() 的所有内容放在上面的 drawPreview 中，但是因为我希望能够使用这个测试器其他类似的功能，我也是这样分开的。

如下所示，我的测试函数声明了一个新图像，然后将加载事件附加到该图像，然后实际加载图像，这会触发加载事件中的匿名函数。

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 插件中进行这项工作的关键是包括对 jQuery 插件的 THIS 的引用，例如 karl-andré-gagnon 在他的评论中建议。通过该引用，您可以访问插件范围的变量和函数。这是我将图像与覆盖大小（存储在我的插件变量中）进行比较的方式，也是我如何将执行从加载事件的匿名函数传递回插件内部的函数。

还要确保您没有在 load-events 匿名函数中传递 THIS 引用（在我的情况下为 SELF），而是按照我所做的那样进行，只需将其写入匿名函数中即可。

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

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);