Question

我正在开发一个使用Javascript的image（）对象动态生成图像的应用。下面的代码，其中object是我传入的URL -

resizeImage: function(object) {
        var img = new Image();
        img.src = object;
        console.log(img);
        console.log(img.width);
        console.log(img.height);
        var ratio;
        if(img.width > img.height) {
            ratio = 82/img.width;
        } else {
            ratio = 82/img.height;
        }
        img.height *= ratio;
        img.width *= ratio;
        return img;
    },

我的控制台日志的输出显示创建的图像对象，源设置为URL -
<img src="https://z3nburmaglot.zendesk.com/attachments/token/F0Y7C9UfUcOaA7nCMJfE5T1yB/?name=Show+Support+Tickets+on+Customer+View.png">，身高和宽度为0。

一些图像加载正常 - 它们适当地设置高度和宽度，如果我刷新JS（再次运行该函数），则高度和宽度为0的图像突然变为正确的高度和宽度。

有关为什么以这种方式构建图像的想法有时会失败？

Answer 1

当您获得宽度或高度时，听起来您的图像尚未加载。然后它将是0.

刷新时，图像位于浏览器缓存中并立即加载，因此其宽度和高度可直接显示。

在正确加载图像后，使用Image对象的onload()事件执行代码

resizeImage: function(object) {
    var img = new Image();

    // first set onload event
    img.onload = function() {
        console.log(img);
        console.log(img.width);
        console.log(img.height);
        var ratio;
        if(img.width > img.height) {
            ratio = 82/img.width;
        } else {
            ratio = 82/img.height;
        }
        img.height *= ratio;
        img.width *= ratio;
    }

    // then set the src
    img.src = object;

    return img;
},

Javascript Image（）对象有时错误地将高度和宽度设置为0

1 个答案: