为什么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); 

- >宽度：0

Answer 1

在您设置src的瞬间，图像开始加载，但是当你要求的宽度不是没有加载。使用onload事件来解决这个问题：

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); 
 
}