Код выполняется непоследовательно и требует многократной перезагрузки страницы для отображения результатов - PullRequest
Новая
       46

Код выполняется непоследовательно и требует многократной перезагрузки страницы для отображения результатов

0 голосов
/ 24 мая 2019

Я использую функцию FileReader для загрузки локального файла изображения, получения высоты и ширины в пикселях и преобразования этих двух значений в миллиметры для печати с разрешением 300 точек на дюйм.

код отображает миниатюру, правильную каждый разно измерения иногда обновляются с первой попытки, иногда только после повторного выбора файла, иногда с использованием 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>

Я хотел бы иметь возможность отображать правильныеРезультаты расчета каждый раз, когда файл выбран.

Ответы [ 2 ]

1 голос
/ 24 мая 2019 
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);
}
}

Я объяснил, почему это может работать в комментариях выше

0 голосов
/ 24 мая 2019

Я бы поместил событие onload в сам элемент preview. Таким образом, вы на 100% уверены, что изображение было визуализировано.

...