7

我正在努力思考并在网站中使用选定的图像。

假设我有一个简单的网站，让用户可以使用以下方法从他们的系统中选择图像：

<input type="file" id="userImage">

然后在 JavaScript 中我可以这样做来获取文件：

var userImage = document.getElementById('#userImage').files[0];

问题：

1) 我现在可以使用 userImage 吗？比如画在画布上，还是需要先上传到网站服务器？

2）如果我使用图片，网站每次使用时都必须上传它，还是留在内存中？

3) 我如何知道图像何时可以使用？（出于同样的原因，所有图像都应在开始时预加载，然后在画布上绘制）

非常感谢你的帮助 ：）

跟进

感谢您的回答。所以看起来它在 html5 中是可能的，但还没有被普遍支持。

4

2 回答 2

17

在 HTML4 中这是不可能的，但在 HTML5 中，您应该能够使用W3 File API访问本地文件。但是，我不确定不同浏览器何时（以及如何）支持它。在我的本地 firefox 14.0.1 中，以下代码有效并生成所选文件的二进制数据：

var reader = new FileReader()
reader.readAsDataURL(document.getElementById('userImage').files[0])
alert(reader.result)

以下页面将本地图像绘制到画布上：

<html>
  <body>
    <script type="text/javascript">
      function doIt() {
        var reader = new FileReader();
        reader.onload = (function(e) {
            var img = new Image();
            img.src = e.target.result;
            var c = document.getElementById("canvas");
            var ctx = c.getContext("2d");
            ctx.drawImage(img,10,10);
          }
        );
        reader.readAsDataURL(document.getElementById('userImage').files[0]);
      }
    </script>

    <input type="file" id="userImage" />
    <button onclick="doIt()">Render Image</button><br/>
    <canvas id="canvas" style="border: 1px solid black; height: 400px; width: 400px;"/>
  </body>
</html>

也许你应该考虑阅读2。

于 2012-08-24T10:29:35.067 回答
-3

1）您无法打开或修改图像，因为客户端脚本在浏览器沙箱中执行。如果脚本可以访问文件系统或用户文件，这将是一个安全问题

2）不，浏览器将文件自己逐块发送到远程服务器

3) 见第 1 项 :)

于 2012-08-24T10:15:19.743 回答