javascript - Javascript Image()获得自然的宽度和高度

我在通过Javascript加载图像时如何提取图像（img）的naturalWidth和naturalHeight的值时遇到问题。

基本上我有以下代码片段：

var newImage = new Image(),
    naturalWidth = 0,
    naturalHeight = 0;
newImage.onload = function() {
    naturalWidth = newImage.width;
    naturalHeight = newImage.height;
}
newImage.src = imageObject.imageArea.filename;
alert("Image Size: " + naturalWidth + "x"+  naturalHeight);

我不知道问题是否是将newImage.width的值传递给naturalWidth或其他任何原因。

如何解决？因此，基本上我想在这里解决的问题是如何提取newImage.width的值以将其传递给naturalWidth。

最佳答案

问题是图像异步加载，并且在onload代码运行之后的将来某个时间调用alert()。您可以在height处理程序中测试width和onload，也可以从那里调用一个函数并将其传递给height和width：

var newImage = new Image(),
newImage.onload = function() {
    var naturalWidth = newImage.width;
    var naturalHeight = newImage.height;
    // use the height and width here
    alert("Image Size: " + naturalWidth + "x"+  naturalHeight);
}
newImage.src = imageObject.imageArea.filename;

要么

var newImage = new Image(),
newImage.onload = function() {
    // pass the height and width in a function call
    callMyFunc(newImage.width, newImage.height);
}
newImage.src = imageObject.imageArea.filename;

仅供参考，您可能也对图像元素上的naturalHeight和naturalWidth属性（图像的未缩放高度和宽度）感兴趣。