我正在尝试在网站中使用所选的图像。
假设我有一个简单的网站，用户可以使用以下命令从系统中选择图像：
<input type="file" id="userImage">
然后在 JavaScript 中我可以这样做来获取文件：
var userImage = document.getElementById('#userImage').files[0];
问题：
1）我现在可以使用userImage吗？比如在画布上绘制，还是需要先将其上传到网站服务器？
2）如果我使用图像，网站是否必须在每次使用时上传它，还是保留在内存中？
3) 我如何知道图像何时可以使用？ （出于同样的原因，所有图像都应该在画布上绘制之前预先加载）
非常感谢你的帮助 ：）
跟进
感谢您的回答。所以看起来在 html5 中是可能的，但尚未得到普遍支持。
在 HTML4 中这是不可能的，但在 HTML5 中你应该能够使用W3 文件 API http://www.w3.org/TR/FileAPI/。但是，我不确定不同浏览器何时（以及如何）支持它。在我的本地 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 http://www.html5rocks.com/en/tutorials/file/dndfiles/.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
