Firefox为图像宽度和高度提供了错误的值

Question

从一个html5 drag'n drop插件,我得到一个数据uri的图像(或从文件输入..).然后我将其设置为图像src:

$("#preview").attr("src",image);

现在,我需要根据图像尺寸进行一些操作.我试过两种方式:

1) - 直接从uri数据获取图像的高度和宽度(我从这里得到这段代码

     var curHeight;
     var curWidth;

     function getImgSize(imgSrc)
     {
      var newImg = new Image();
      newImg.src = imgSrc;
      curHeight = newImg.height;
      curWidth = newImg.width;
     }

     getImgSize(The_data_uri);

2)通过测试html上创建的图像:(这里我创建了两个布尔值)

var lt = function(v1, v2){
    return v1 < v2;
}

var gt400 = (lt(400,parseInt($("#preview").css('width').replace('px', ''))) && lt(400,parseInt($("#preview").css('height').replace('px', ''))) && !window['cropIsOn'] );

var eq400 = (parseInt($("#preview").css('width').replace('px', ''))==400 && parseInt($("#preview").css('height').replace('px', ''))==400) && !window['cropIsOn'] ;

在铬我总是得到正确的尺寸,因此对尺寸的测试是纠正.但是,在Firefox上它是不正确的(我有错误的宽度和高度值).顺便说一句,我不是每次尝试不同的图像格式(我只使用jpg图像).

我想明白为什么firfox对阅读高度和宽度不稳定.欢呼!

-编辑-

我试图获取其尺寸的图像位于隐藏的div中

<div id="prview_img_wrap" style="position:absolute;top:465px; left:200px;z-index:8; width:100px;height:100px;overflow:hidden;margin-left:5px; border:2px dashed white; visibility:hidden;">
    <img src="" id="preview" />
</div>

Answer 1

图像的高度和宽度仅在加载图像后可用.所以这是正确的方法:

var curHeight;
var curWidth;

function getImgSize(imgSrc){
    var newImg = new Image();
    newImg.onload = function () {
        curHeight = this.height;
        curWidth = this.width;
    };
    newImg.src = imgSrc;
}