Javascript 如何从画布上的HTML5文件API绘制图像？_Javascript_Canvas_Drawimage_Fileapi

Javascript 如何从画布上的HTML5文件API绘制图像？

javascript canvas

Javascript 如何从画布上的HTML5文件API绘制图像？,javascript,canvas,drawimage,fileapi,Javascript,Canvas,Drawimage,Fileapi,我想在画布上绘制一幅用HTML5文件API打开的图像在handleFiles（e）方法中，我可以使用e.target.files[0]访问文件，但我不能使用drawImage直接绘制该图像。如何从HTML5画布上的文件API绘制图像以下是我使用的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script> window.onload = function() {

我想在画布上绘制一幅用HTML5文件API打开的图像

在

handleFiles（e）

方法中，我可以使用

e.target.files[0]

访问文件，但我不能使用

drawImage

直接绘制该图像。如何从HTML5画布上的文件API绘制图像

以下是我使用的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script>
window.onload = function() {
    var input = document.getElementById('input');
    input.addEventListener('change', handleFiles);
}

function handleFiles(e) {
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.drawImage(e.target.files[0], 20,20);
    alert('the image is drawn');
}
</script>
</head>
<body>
<h1>Test</h1>
<input type="file" id="input"/>
<canvas width="400" height="300" id="canvas"/>
</body>
</html>


window.onload=函数（）{
var input=document.getElementById（'input'）；
input.addEventListener（'change'，HandleFile）；
}
功能手柄（e）{
var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
ctx.drawImage（e.target.files[0]，20,20）；
警报（“图像已绘制”）；
}
试验

您有一个不是图像的

文件

实例

要获取图像，请使用

newimage（）

。

src

需要是引用所选

文件的URL

。您可以使用

URL.createObjectURL

获取引用

Blob

的URL（

文件也是Blob
）：
注意：请确保在处理完对象url后将其撤消，否则会泄漏内存。如果你没有做任何疯狂的事情，你可以在img.onload
函数中粘贴一个URL.revokeObjectURL（img.src）

参考资料：





您还可以使用FileReader
来创建对象URL
浏览器支持稍好一些
FileReader
方法在FF6/Chrome中工作。不过，我不确定将Img.src
设置为Blob
是否有效，是否可以跨浏览器访问
创建对象URL是正确的方法
编辑：
如commment窗口中所述。脱机时的URL
支持在FF6/Chrome中似乎不可用。
这里有一个使用文件阅读器（如Raynos所述，它具有更好的浏览器支持）。在本例中，我还缩放画布以适合图像
在现实生活中的示例中，您可以将图像缩放到某个最大值，以便您的窗体不会爆炸；-）。这是一个。
请在src
之前附加onload
。load
事件可在这两行之间触发。（如果图像被缓存等）@Raynos:谢谢。（虽然在这种情况下，文件的加载速度必须非常快…）出于好奇，您是否可以参考HTML5规范中“将.src
设置为Blob/文件”的地方？我有一个小小的障碍，这可能是一个专有的扩展。它恰好在Chrome/FF6中工作（没有opera、IE10或Saf夜总会可供测试）@Raynos:我的错，我误读了。这似乎回答了您的疑问：将result属性设置为blob的数据内容，表示为数据URL[DataURL]；获取时，result属性将blob的（完整）数据作为数据URL返回
。显然，可以将数据URL设置为图像的src
；这将很好地加载。@Jonas:不会被修复：。这可以工作，但只能在线。如果我用Chrome中的一个本地.html文件尝试这个方法，它就不起作用了。FileReader方法在本地也不起作用。。。谢谢。@Jonas那可能是一件好事。如果它们被默认阻止，我也不会感到惊讶。打开它可能会发现一些模糊的标志。@Jonas似乎模糊的标志是--允许从文件访问文件。对于chrome。
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image;
img.onload = function() {
    ctx.drawImage(img, 20,20);
    alert('the image is drawn');
}
img.src = URL.createObjectURL(e.target.files[0]);

function handleFiles(e) {
    var ctx = document.getElementById('canvas').getContext('2d');
    var url = URL.createObjectURL(e.target.files[0]);
    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 20, 20);    
    }
    img.src = url;   
}