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

Image.onload function returns zero for height and width

本文关键字：返回 高度 onload 函数 Image      更新时间：2023-12-04
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，最后由于高度和宽度0图像永远不会加载。有什么帮助吗？

此操作异步运行。该行：

var rati=wid1/hei1;

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

在对它们执行操作之前，请确保已加载wid1和hei1。您可以做的是将divide 操作放在 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;
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;
};

我遇到了一个问题，即 image.width 和 image.height 在加载回调中为 0。 它们是为 jpg 文件设置的，而不是在我加载 png 时设置的。我通过在加载回调函数中使用 this.width 和 this.height 来解决此问题。 这些不是零.
也许这会帮助其他人。 我正在使用铬。

争用条件。您在加载图像之前定义rati，因此显然它无法知道正确的大小并且undefined/undefined。若要修复，只需将需要加载图像的所有代码放在icon1.onload处理程序中即可。

相关文章：