2

下面的 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;

  ......
}
4

2 回答 2

3

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

  var i = new Image();
  i.onload = function() {
     //console.log(i);
     var maxWidth = 600;
     var imageWidth = this.width;
  }
  i.src  = dataURL;
  i.file = file;
于 2012-11-29T23:05:26.730 回答
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;

}
于 2012-11-29T23:03:45.513 回答