Question

从一个html5 drag'n drop插件，我得到一个数据uri的图像（或从文件输入..）。然后我将其设置为图像src：

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

现在，我需要根据图像尺寸进行一些操作。我试过两种方式：

1） - 直接从uri数据中获取图像的高度和宽度（我从here获得了这段代码

     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'] ;

在chrome上，我总是得到正确的尺寸，因此对尺寸的测试是正确的。但是，在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;
}

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

1 个答案: