Question

我看过有关如何显示通过文件输入控件选择的图像的帖子。当我尝试这些解决方案时，它们可以工作，但我还有一个问题，我无法自己找到答案：当我第一次选择图像时，图像将不会显示，因为没有图像宽度和高度数据是可用（图像数据可通过FileReader obj获得，但不是图像宽度和高度）。第二次选择图像（或重新加载后），宽度和高度变得可用。为什么会发生这种情况，我该怎么做才能解决这个问题？谢谢。

这是我一直在使用的一些代码 - 这是FileReader函数之一。我开始使用reader.onload，但后来认为图像宽度和高度不可用，因为它尚未完全加载。因此，onloadend似乎是一个更好的选择。但是，它在这里没有任何效果：

reader.onloadend = function(e) {

  var img = new Image();
  img.src = e.target.result;// or reader.result - doesn't matter

  // A function that does math to proportionally scale the image

  var new_size = scaleImageSize(150, 150, img.width, img.height);

  img.width = new_size[0];
  img.height = new_size[1];

  // And here I am trying both ways to display the image: the first
  // in a div tag, the second straight into an img tag. I only want
  // to use one of these - preferably the div tag. I have also tried
  // drawing the image onto an HTML5 canvas. All to no avail.

  document.getElementById("file_display_area").appendChild(img);
  document.getElementById("img_file_display_area").src = img.src;

  console.log(img.width + '|' + img.height + '||' + new_size[0] + '|' + new_size[1]);

}

使用图像调整大小

0 个答案: