代码运行不一致，需要多次页面重新加载才能显示结果

Question

我正在使用 FileReader 函数加载本地图像文件，获取以像素为单位的高度和宽度，并将这两个值转换为毫米以便以 300 dpi 打印。

代码每次都显示正确的缩略图，但测量结果有时会在第一次尝试时更新，有时仅在再次选择文件后才会更新，有时使用 F5 甚至 CRTL + F5 重新加载。

我试过对reader.addEventListener函数、Math.round函数进行故障排除，基本上是盲目试错。

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

 <title>Pixelkonverter</title>
</head>

<body>
 <div class="container">
   <div class="row">
     <div class="col-sm my-5">
      <input type="file" onchange="previewFile()"><br>
      <hr>
      <img src="" height="200" alt="Bildvorschau...">
    </div>
    <div class="col-sm my-5">
      Bei 300 dpi ist das gewählte Bild <br>
      <span id="height_mm"></span> mm hoch </br>
      <span id="width_mm"></span> mm breit </br>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script>
  function previewFile() {
    var preview = document.querySelector('img');
    var file    = document.querySelector('input[type=file]').files[0];
    var reader  = new FileReader();
    var img = new Image();
    var height_mm = 0;
    var width_mm = 0;


    reader.addEventListener("load", function () {
      preview.src = reader.result;
      img.src = reader.result;
      var height_mm = Math.round((img.height * 25.4 / 300) * 100) / 100;
      var width_mm =  Math.round((img.width * 25.4 /300) * 100) / 100;
      document.getElementById("height_mm").innerHTML = height_mm;
      document.getElementById("width_mm").innerHTML = width_mm;
    }, false);


    if (file) {
      reader.readAsDataURL(file);
    }
  }
</script>
</body>
</html>

我希望每次选择文件时都能显示正确的计算结果。

Answer 1

我会将 onload 事件放入 preview 元素本身。这样您就可以 100% 确定图像已被渲染。

Answer 2

function previewFile() {
var preview = document.querySelector('img');
var file    = document.querySelector('input[type=file]').files[0];
var reader  = new FileReader();
var img = new Image();
var height_mm = 0;
var width_mm = 0;


reader.addEventListener("load", function () {
  preview.src = reader.result;
  img.onload = function() {
       var height_mm = Math.round((img.height * 25.4 / 300) * 100) / 100;
       var width_mm =  Math.round((img.width * 25.4 /300) * 100) / 100;
       document.getElementById("height_mm").innerHTML = height_mm;
       document.getElementById("width_mm").innerHTML = width_mm;
  }
  img.src = reader.result;
}, false);


if (file) {
  reader.readAsDataURL(file);
}
}

我已经在上面的评论中解释了为什么这可能有效

代码运行不一致，需要多次页面重新加载才能显示结果

Code runs inconsistently and needs multiple page reloads to display results

javascript

filereader

fileapi