通过 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'

我也尝试过通过 window 的丑陋的 hackish 解决方案，但这对我也不起作用，也许是因为代码应该在加载事件之前执行警报触发器？

            //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 在他的评论中建议的那样。通过该引用，您可以访问插件范围内的变量和函数。这是我将图像与叠加层大小（存储在我的插件的变量中）进行比较的方式，也是我如何将执行从加载事件的匿名函数传递回我的插件内的函数的方式。

还要确保你没有在加载事件匿名函数中传递 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);

通过 Javascript 检查图像大小

Checking image size via Javascript

javascript

jquery

image

jquery-plugins

dimensions