为什么createObjectURL构造的图像宽度为0？

Question

这是我的代码，它应该从表单文件输入加载图像，如果它太大则调整它的大小。问题是，当我创建一个新的图像对象并设置其src时，它的宽度等于零。但是，当我将图像放入html时，它会正确显示。

var image = document.createElement('img');
var image_url = window.URL.createObjectURL(image_data);
image.src = image_url;
console.log('Width: ' + image.width);

- ＆GT;宽度：0

Answer 1

在您设置src的那一刻，图像开始加载，但是当您请求宽度时它尚未加载。使用onload事件来修复：

＆＃13;

＆＃13;

var image = document.createElement('img');
var image_url = "http://domaingang.com/wp-content/uploads/2012/02/example.png"; //window.URL.createObjectURL(image_data);
image.src = image_url;
image.onload = function()
{
  alert(image.width);
}

＆＃13;

＆＃13;

＆＃13;