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

Я использую функцию 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>

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


javascript filereader fileapi
person Sven Tenscher    schedule 24.05.2019    source источник
comment
Вы пытались использовать файл reader.onload вместо добавления прослушивателя событий загрузки? developer.mozilla.org/en-US/docs/Web/ API/FileReader/загрузка   -  person Jonathan Hinds    schedule 24.05.2019
comment
stackoverflow.com/questions/3511200/   -  person Loveen Dyall    schedule 24.05.2019
comment
когда вы назначаете img.src, изображение могло не быть загружено, поэтому атрибуты ширины и высоты равны нулю или не определены   -  person Loveen Dyall    schedule 24.05.2019

Ответы (2)


arrow_upward
1
arrow_downward 

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);
}
}

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

person Loveen Dyall    schedule 24.05.2019
comment
Большое Вам спасибо. Не думал об этом. Я догадался, когда миниатюра была правильной, все остальное должно быть. С загрузкой это работает как сон - person Sven Tenscher; 24.05.2019

arrow_upward
0
arrow_downward

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

person Diodeus - James MacFarlane    schedule 24.05.2019