Javascript：图像完整/加载事件未被触发

Question

我有这个代码，我想用它来检查图像的宽高比，然后加载它。

我的问题是，与绑定的函数回调image.complete事件没有触发。

我在哪里错了？

checkAspectRation : function(file){ 

    var reader = new FileReader(); 
    /*Read the file*/ 
    reader.readAsDataURL(file); 

    /*Callback */ 
    reader.onloadend = (function() { 

     var image = new Image(); 

     image.complete = function() { 
      // access image size here 
      console.log("Width: " + this.width); 
      console.log("Height: " + this.height); 
     }; 

     image.src = reader.result; 

     console.log(image); 
    }); 

}, 

这是图像的加载后的值：

[编辑]

我以这种方式改变了，但它依然不工作

checkAspectRation : function(file){ 

    var image = new Image(); 
    image.onload = function() { 
     // access image size here 
     console.log("Width: " + this.width); 
     console.log("Height: " + this.height); 
    }; 

    var reader = new FileReader(); 

    /*Callback */ 
    reader.onloadend = (function() { 
     console.log(image); 
     image.src = reader.result;  
    }); 

    /*Read the file*/ 
    reader.readAsDataURL(file); 
}, 

Answer 1

已解决已更改：

var image = new Image(); 

与

var image = document.createElement("img"); 

这工作得很好：

checkAspectRation : function(file){ 

    var reader = new FileReader(); 

    /*Callback */ 
    reader.onloadend = function() { 

     //var image = new Image(); 
     var image = document.createElement("img"); 
     image.onload = function() { 
      // access image size here 
      console.log("Width: " + this.width); 
      console.log("Height: " + this.height); 
     }; 

     image.src = reader.result; 

    }; 

    /*Read the file*/ 
    reader.readAsDataURL(file); 
},