Question

我想在画布上绘制一个用HTML5 File API打开的图像。

在handleFiles(e)方法中，我可以使用e.target.files[0]访问文件，但我无法使用drawImage直接绘制该图像。如何从HTML5画布上的File 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>

Answer 1

您有一个File实例，而不是图像。

~~要获取File的内容，请使用FileReader。然后将内容传递给Image实例，该实例可以在画布上绘制：http://jsfiddle.net/t7mv6/。~~

要获取图片，请使用new Image()。 src必须是引用所选File的网址。您可以使用URL.createObjectURL获取引用Blob的网址（File也是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]);

注意：请确保在完成后撤消对象网址，否则会泄漏内存。如果你没有做任何过于疯狂的事情，你可以在URL.revokeObjectURL(img.src)函数中加上img.onload。

参考文献：

Answer 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

您也可以使用FileReader来创建对象网址。

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

FileReader方法适用于FF6 / Chrome。我不确定将Img.src设置为Blob是否有效并且是否跨浏览器。

创建对象网址是正确的方法。

修改

正如提交window.URL支持中提到的那样，离线似乎在FF6 / Chrome中无法使用。

Answer 3

以下是complete example (Fiddle)使用FileReader（Raynos提到的浏览器支持更好）。在这个例子中，我还缩放Canvas以适合图像。

在现实生活中，您可以将图像缩放到最大值，这样您的表单就不会爆炸;-)。这是一个example with scaling (Fiddle)。

如何从Canvas上的HTML5 File API中绘制图像？

3 个答案: