HTML 5 图片缩放

Question

HTML 5 图片缩放

3

我正在尝试在HTML5中调整图片大小，有许多关于如何实现的示例，但我无法通过此点。这是一个对我不起作用的代码片段。

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8" />
    <title>Picture Test</title> 
    <meta name="viewport" content="width=device-width" />
  </head>

  <body>            
    <form action="/MyWebsiteLogo/LogoPicture/95" enctype="multipart/form-data" id="picture" method="post">

      <div style="width: 100%; padding: 0px;">
        <input id="input" name="file" onchange="handleFiles()" type="file" value="" /><br /><br />
        <input type="submit" value="Upload" />
      </div>


      <script>

        function handleFiles() {
          var fileList = input.files;
          var file = fileList[0];

          var img = document.createElement("img");
          var reader = new FileReader();
          reader.onload = function (e) { img.src = e.target.result }
          reader.readAsDataURL(file);

          var width = img.width;
          var height = img.height;
        }

      </script>

    </form>       
  </body>
</html>

当我运行此代码并选择文件时，Google调试器显示文件已选择，但img和reader未使用所选文件进行初始化（请参见下面的两个屏幕截图）。我做错了什么？谢谢！

Google调试器屏幕截图1 Google调试器屏幕截图2

- Dima

2个回答

1

在这段代码中，您现在可以看到预览图像。但是您想要调整大小图像。resize到多大？

function handleFiles() {
    var fileList = input.files;
    var file = fileList[0];

    var img = document.createElement("img");
    var reader = new FileReader();
    reader.onload = function (e) { 
      img.onload = function() {
        // This width and height will be correct because until now the image are not get the src
        var width = img.width;
        var height = img.height;  
        alert(width + ',' + height);
      }
      img.src = e.target.result; 
    }
    reader.readAsDataURL(file);

    var width = img.width;
    var height = img.height;
    document.body.appendChild(img); 
}

<form action="/MyWebsiteLogo/LogoPicture/95" enctype="multipart/form-data" id="picture" method="post">
    <div style="width: 100%; padding: 0px;">
        <input id="input" name="file" onchange="handleFiles()" type="file" value="" /><br />
        <br />
        <input type="submit" value="Upload" />
    </div>
</form>

- Mosh Feu

1

我一定是看错了。是的，我看到选定的图像已附加到文档并显示出来了。但在Google调试器中，变量'width'和'height'仍然是0，就像原问题中的第一张图片一样。我知道下一步该怎么做来调整大小。我只是不明白为什么调试器显示所选图像的大小为0，但实际上图像已被选定。 - Dima

你的编辑也是错误的。如果图像加载所需的时间超过浏览器尝试获取其大小的时间，则可能无法正常工作。 - Kaiido

这是因为在这几行代码中，图像的src尚未设置。在 reader.onload 后和 img.src = e.target.result; 立即为该图像获取完整的 src，然后 width 和 height 才是正确的。我已经更新了我的答案。@Kaiido 你不需要为此进行负投票，我也已经修复了它。 - Mosh Feu

我花了将近3分钟的时间玩你的代码和OP的代码之间的7个差异，结果发现你什么也没解决...也许我不应该告诉你我解决了，但我确实解决了。不幸的是，你的编辑仍然指向一些问题，并没有添加任何关于你从OP那里改变了什么的信息。我仍然无法删除它...如果你编辑你的答案以使其正确，恐怕它只会成为我的副本... - Kaiido

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kaiido · Accepted Answer

当你尝试获取img.width和img.height时，img的src尚未设置。

你必须在img的onload事件处理程序中设置这些变量。

function handleFiles() {
    var fileList = input.files;
    var file = fileList[0];

    var img = document.createElement("img");
    img.onload = function(){
        var width = img.width;
        var height = img.height;
      snippet.log('width: '+ width);
      snippet.log('height: '+height);
      }
    
    var reader = new FileReader();
    reader.onload = function (e) { 
      img.src = e.target.result; 
    }
    reader.readAsDataURL(file);
}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<form action="/MyWebsiteLogo/LogoPicture/95" enctype="multipart/form-data" id="picture" method="post">
    <div style="width: 100%; padding: 0px;">
        <input id="input" name="file" onchange="handleFiles()" type="file" value="" /><br />
        <br />
        <input type="submit" value="Upload" />
    </div>
</form>