Fatal编程技术网
  • javascript/
  • Javascript 代码运行不一致，需要多次重新加载页面才能显示结果

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

javascript

Javascript 代码运行不一致，需要多次重新加载页面才能显示结果,javascript,filereader,fileapi,Javascript,Filereader,Fileapi,我正在使用FileReader函数加载一个本地图像文件，以像素为单位获取高度和宽度，并将其转换为毫米，以300 dpi的速度打印 代码每次都显示正确的缩略图，但测量值有时在第一次尝试时更新，有时仅在再次选择文件后更新，有时使用F5甚至CRTL+F5重新加载 我已经尝试过对reader.addEventListener函数、Math.round函数进行故障排除，基本上是盲目的尝试和错误 <!doctype html> <html lang="en"> <head&g

我正在使用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>


像素转换




Bei 300新闻部是《图片报》

霍奇先生

嗯，布莱特

函数previewFile（）{
var preview=document.querySelector（'img'）；
var file=document.querySelector（'input[type=file]'）。files[0]；
var reader=new FileReader（）；
var img=新图像（）；
变量高度_mm=0；
变量宽度_mm=0；
reader.addEventListener（“加载”，函数（）{
preview.src=reader.result；
img.src=reader.result；
变量高度_mm=数学圆（（img.height*25.4/300）*100）/100；
变量宽度_mm=数学圆（（img.宽度*25.4/300）*100）/100；
document.getElementById（“height_-mm”）.innerHTML=height_-mm；
document.getElementById（“width_-mm”）.innerHTML=width_-mm；
(不正确),；
如果（文件）{
reader.readAsDataURL（文件）；
  }
}
我希望每次选择一个文件时都能显示正确的计算结果。

我会在
预览
元素本身中放入一个onload事件。这样，您可以100%确定图像已渲染

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);
}
}
我已经在上面的评论中解释了为什么这可能有效

您是否尝试过使用file reader.onload而不是添加加载事件侦听器？当您指定img.src时，图像可能尚未加载，因此宽度和高度属性为空或未定义非常感谢。我没想过。我猜缩略图什么时候是正确的，其他的也应该是正确的。有了onload，它就像一个梦一样工作