如何从Canvas上的HTML5文件API中提取图像?

I would like to draw an image opened with the HTML5 File API on a canvas.

我想在画布上用HTML5文件API打开一个图像。

In the handleFiles(e) method, I can access the File with e.target.files[0] but I can't draw that image directly using drawImage. How do I draw an image from the File API on HTML5 canvas?

在handleFiles(e)方法中，我可以使用.target访问文件。文件[0]但是我不能直接用drawImage来画那个图像。如何从HTML5 canvas上的文件API中提取图像?

Here is the code I have used:

下面是我使用的代码:

<!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>

3 个解决方案

#1

You have a File instance which is not an image.

你有一个文件实例，它不是一个图像。

~~To get contents of a File, use a FileReader. Then pass the contents to an Image instance, which can be drawn on a canvas: http://jsfiddle.net/t7mv6/.~~

要获取文件的内容，请使用FileReader。然后将内容传递给一个图像实例，该实例可以在画布上绘制:http://jsfiddle.net/t7mv6/。

To get an image, use new Image(). The src needs to be an URL referencing to the selected File. You can use URL.createObjectURL to get an URL referencing to a Blob (a File is also a Blob): http://jsfiddle.net/t7mv6/86/.

要获得图像，请使用new image()。src需要是一个指向所选文件的URL。您可以使用URL。createObjectURL获取指向Blob的URL(文件也是Blob): http://jsfiddle.net/t7mv6/86/。

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]);

Note: be sure to revoke the object url when you are done with it otherwise you'll leak memory. If you're not doing anything too crazy, you can just stick a URL.revokeObjectURL(img.src) in the img.onload function.

注意:当您使用该对象url时，一定要撤销它，否则您将会泄漏内存。如果你没有做任何疯狂的事情，你可以在img中粘贴一个URL.revokeObjectURL(img.src)。onload函数。

References:

引用:

https://developer.mozilla.org/en/DOM/File
https://developer.mozilla.org/en/DOM/File
http://html5demos.com/file-api
http://html5demos.com/file-api

#2

Live Example

生活的例子

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;   
}

window.URL.createObjectUrl^docs

window.URL.createObjectUrldocs

You could also use the FileReader instead to create the object URL.

您还可以使用FileReader来创建对象URL。

The FileReader has slightly better browser support.

FileReader的浏览器支持稍好一些。

The FileReader approach works in FF6 / Chrome. I'm not certain whether setting Img.src to a Blob is valid and cross-browser though.

FileReader方法在FF6 / Chrome中工作。我不确定是否设置Img。src对于一个Blob是有效的和跨浏览器的。

Creating object urls is the correct way to do it.

创建对象url是正确的方法。

Edit:

编辑:

As mentioned in the commment window.URL support whilst offline seems unavailable in FF6/Chrome.

就像在开始的窗口中提到的那样。在离线时，URL支持在FF6/Chrome中不可用。

#3

Here is a complete example (Fiddle) using FileReader (which has better browser support as mentioned by Raynos). In this example I also scale Canvas to fit the image.

这里有一个使用FileReader的完整示例(如Raynos所提到的，它有更好的浏览器支持)。在这个示例中，我还使用了画布来匹配图像。

In real life example you might scale the image to some maximum so that your form will not blow up ;-). Here is an example with scaling (Fiddle).

在现实生活中，你可以将图像缩放到最大值，这样你的表单就不会被放大。这里有一个缩放(Fiddle)的例子。

#1