Question

以下handleFiles方法正在从拖放和文件输入传递文件。在获取给定文件的数据URL后，它将其传递给processImage函数。此函数创建一个新图像并设置该图像的src和文件。然后，我根据输入图像的宽度采取不同的操作，并将图像插入到dom中。然而，我注意到当放入一堆图像时imageWidth将被设置为0.我已经确认image.src已正确设置并且丢弃相同的图像本身工作正常。我还确认，如果我删除宽度计算，图像会在页面上正确显示。当我进入调试器时，我可以确认在imageWidth设置为0后立即i.width返回正确的值。起初我认为这可能是Chrome中的一个线程问题，但是当我看到它在FireFox中发生时我也感到惊慌。我无法确定某个阈值，但是您在浏览器上加载的负载越多，正确获取宽度的可能性就越小。

我在FireFox 16.0.2和Chrome 23.0.1271.95中都看到了这个问题。

function handleFiles(files) {

  for (var i = 0; i < files.length; i++) {
    var file = files[i];

    if( !isImage(file) ) { 
      continue;
    }   

    var reader = new FileReader();

    reader.onloadend = function(e) {
      var dataURL = e.target.result;
      processImage(file, dataURL);
    }   

    reader.readAsDataURL(file);
  }
}

function processImage(file, dataURL) {
  var i = new Image();
  i.src  = dataURL;
  i.file = file;

  //console.log(i);
  var maxWidth = 600;
  var imageWidth = i.width;

  ......
}

Answer 1

与所有图像一样，它们可能需要时间加载才能告诉您它们的宽度：

  var i = new Image();
  i.onload = function() {
     //console.log(i);
     var maxWidth = 600;
     var imageWidth = this.width;
  }
  i.src  = dataURL;
  i.file = file;

Answer 2

宽度（和高度）可能为0，因为它尚未加载。

尝试添加load事件，如下所示：

function processImage(file, dataURL) {
  var i = new Image();


  i.addEventListener("load", function () {
    var maxWidth = 600;
    var imageWidth = i.width;

    ......

  });

  i.src  = dataURL;
  i.file = file;

}

<img/>宽度在重负载下返回0

2 个答案: