我正试着在网站上使用所选图像.
假设我有一个简单的网站,让用户可以使用以下系统从系统中选择图像:
<input type="file" id="userImage">
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.
原文地址:https://www.jb51.cc/html5/168067.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。