通過Javascript檢查圖像大小

Question

我需要通過javascript檢查圖像的尺寸（圖像尚未在任何地方附加到DOM），並通過圖像上的load（）事件進行檢查。

下面的變量IMAGE包含有效的圖片網址。 下面的變量SELF包含對插件THIS的引用。

問題是，在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'

我還嘗試了通過窗口進行丑陋的修改方案，但這對我也不起作用，可能是因為代碼應該在加載事件之前觸發警報嗎？

            //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個函數相互傳遞線程的系統，但是從load事件開始，沒有辦法調用我的jquery-plugin實例嗎？ （看到我不知道用戶將實例化插件的方式，否則，如果我想要一個更丑陋的解決方案，我可以對實例名稱進行硬編碼）。

我想我可以設置某種超時方法：從插件內部對圖像進行掃描，而不是使用load（）事件，但是我認為可能有一種我還沒有想到的更聰明的方式...

Answer 1

這就是我最終解決它的方式。 就像我在最初的問題中所說的那樣，必須使用以下三個函數才能使其變得干凈：

在我的插件中，要繪制圖像預覽，請執行以下調用：

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

但是drawPreview函數只會將執行反彈到isImageGreaterThanOverlay測試中

var drawPreview = function(self,entityId){

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

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

如果我只將isImageGreaterThanOverlay（）函數用於drawPreview（）函數，則可以將isImageGreaterThanOverlay（）綁定的所有內容都放在上述drawPreview中，但是由於我希望能夠將此測試器用於其他類似函數同樣，我將其分開放置。

如下所示，我的測試器函數聲明一個新的Image，然后將加載事件附加到該圖像，然后實際加載該圖像，這將觸發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);

這很重要，因為當代碼嘗試讀取圖像尺寸時，以任何其他方式執行此操作都可能會導致圖像無法完全加載到瀏覽器中。

在jQuery插件中實現此功能的關鍵是包括對jQuery插件的THIS的引用，例如在他的評論中建議的karl-andré-gagnon。 通過該參考，您可以訪問插件作用域的變量和函數。 這是我將圖像與疊加大小（存儲在插件的變量中）進行比較的方式，也是如何將執行從加載事件的匿名函數傳遞回插件內部函數的方法。

還要確保您沒有在加載事件匿名函數中傳遞THIS引用（在我的情況下為SELF），但要像我所做的那樣進行操作，只需將其寫入匿名函數中即可。

因此，當加載事件匿名函數完成大小檢查后，它將執行傳遞給我稱為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);