Question

var icon1 = new Image();
var wid1;
var hei1;
icon1.onload = function () {
    wid1 = icon1.width;
    hei1 = icon1.height;
};
icon1.src = resource;
var rati = wid1 / hei1;

我要做的是获取图像的宽度和高度，然后计算将进一步帮助维持图像宽高比的比率。

但是当我运行此代码时，很多时候我将图像的宽度和高度设为0，这会导致转换率达到NaN，最后由于{{1}而导致图像永远不会加载高度和宽度。任何帮助？

Answer 1

此操作以异步方式运行。这一行：

var rati=wid1/hei1;

无论图像是否加载，都会运行。这意味着wid1和hei1为undefined，并将两个未定义的值除以NaN。

确保在对wid1和hei1进行操作之前加载onload和var icon1, wid1, hei1, rati; //create our image object icon1 = new Image(); icon1.onload = function () { wid1 = icon1.width; hei1 = icon1.height; rati = wid1 / hei1; //everything else that depends on these variables //should be placed here as well }; //start loadin' icon1.src = resource;。您可以做的是将除法运算放在{{1}}处理程序中（以及依赖于这些值的所有其他内容：

{{1}}

Answer 2

JavaScript以异步方式加载图像，因此您在图像仍在加载时尝试计算比率。您必须将计算移动到回调函数中：

var icon1 = new Image();
var wid1;
var hei1;
icon1.src = resource;
icon1.onload = function () {
    wid1 = icon1.width;
    hei1 = icon1.height;
    var rati = wid1 / hei1;
};

Answer 3

我在onload回调中image.width和image.height为0时遇到问题。它们是为jpg文件设置的，而不是在我加载png时设置的。我通过在onload回调函数中使用this.width和this.height修复了此问题。那不是零。
也许这会帮助别人。我正在使用Chrome。

Answer 4

比赛条件。您在加载图片之前定义rati，因此很明显它无法知道正确的尺寸并且undefined/undefined。要修复，只需在icon1.onload处理程序中放入需要加载图像的所有代码。

Image.onload函数返回零的高度和宽度

4 个答案: