html5 – 理解

我正试着在网站上使用所选图像.

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

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

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

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

问题：

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

2)如果我使用图像,网站是否必须在我每次使用时上传它,还是留在内存中？

3)我如何知道图像何时可以使用？ (出于同样的原因,所有图像都应该在开始之前预先加载在画布上)

非常感谢你的帮助：)

跟进

谢谢你的回答.因此看起来它可能在html5中但尚未得到普遍支持.

解决方法

在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.

html5 – 理解

解决方法

相关文章