Question

好的，第一次发帖提问，我希望我能按书完成所有事情。

我想使用javascript来检索和显示用户使用“输入”按钮选择的图像的宽度/高度。但这是一个炎热的一天，我可以感觉到我的大脑只是围成一圈。

使用这个脚本，我得到它来显示图像和宽度（或者我认为）。我尝试选择宽度为180px的图像但我的脚本返回数字16.其他图像返回16或其他任意数字。

编辑：不同的浏览器返回不同的数字。

我在展示什么以及我错过了什么才能做到正确？

这是我的HTML：

<head>
    <title>Image size calculator</title>

    <!-- Normalize.css -->
    <link rel="stylesheet" type="text/css" href="normalize.css">

    <!-- Custom Styles -->
    <link rel="stylesheet" type="text/css" href="style.css">

    <!--[if IE]>
    <script 
    src="https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js">
    </script>
    <![endif]-->

</head>

<body>
    <h1>Vilken storlek har min bild?</h1>
    <p><em>Supported formats are: BMP/CUR/GIF/ICO/JPEG/PNG/PSD/TIFF/WebP/SVG/DDS</em></p><br><br>
    <form>
        <input type="file" onchange="readURL(this);">
        <br><br>
        <img id="imageDisplay" src="#" />
        <label id="imageSize">Bilden är: </label>
    </form>

    <!-- How to load jQuery.
        1. Load the CDN version (internet)
        2. If fail, load the installed (local) -->
    <script
          src="http://code.jquery.com/jquery-3.3.1.min.js"
          integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
          crossorigin="anonymous"></script>

    <script>window.jQuery || document.write('<script src="js/jquery-3.3.1.js"><\/script>');</script>

    <script src="js/script.js"></script>

</body>

这是我的script.js文件中的代码：

function readURL(input) {


    var reader = new FileReader();

    reader.onload = function (e) {
        $('#imageDisplay')
            .attr('src', e.target.result)
            .width(this.width)
            .height(this.height);

    };

    reader.readAsDataURL(input.files[0]);



    var imgWidth = $("#imageDisplay").width();
    $("#imageSize").append(imgWidth);

}

编辑2：感谢所有的解决方案。我尝试了斯科特（这让我的额头咂了一下，当我读到它时说'呃'）。我似乎是在正确的轨道上，因为我怀疑图像没有满载。我只是无法获得正确检查的代码。有时你需要向正确的方向推动一下。：）

Answer 1

您正在设置src后立即尝试获取大小，并且此时图像没有足够的时间完成加载。除了阅读器之外，您还需要为图像设置load事件处理程序。

var imgWidth = null;
var imgHeight = null;

// The image needs a load callback that won't fire until the image
// is finished downloading.
$('#imageDisplay').on("load", function(){
   // Now, it's safe to get the width and height             > 
   imgWidth = this.width;
   imgHeight = this.height;
   $("#imageSize").append(imgWidth);
});

function readURL(input) {
  var reader = new FileReader();
  reader.onload = function (e) {
    $('#imageDisplay').attr('src', e.target.result)
  };
  reader.readAsDataURL(input.files[0]);
}

Answer 2

我建议重新构建代码，以便在设置宽度之前加载图像：

function readURL(input) {
  var reader = new FileReader();
  var imgWidth;

  reader.onload = function (e) {
      $('#imageDisplay')
      .attr('src', e.target.result)
      .width(this.width)
      .height(this.height);

      imgWidth = $("#imageDisplay").width();
  };

  reader.readAsDataURL(input.files[0]);

  $("#imageSize").append(imgWidth);
}

无法使用javascript

2 个答案: