javascript - 通过 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 插件的实例，对吧？ (看到我不知道用户将插件实例化为什么，否则如果我想要一个更丑陋的解决方案，我可以硬编码实例名称)。

我想我可以设置某种超时:从插件内部对图像进行超时处理，而不是使用 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);