我想在画布上绘制使用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>
您有一个File实例，它不是图像。
要获取File的内容，请使用FileReader。然后将内容传递到Image实例，该实例可以在画布上绘制：http://jsfiddle.net/t7mv6/。
要获取图像，请使用new Image()。 src必须是引用所选File的URL。您可以使用URL.createObjectURL获取引用Blob的URL（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，否则会浪费内存。如果您没有做任何太疯狂的事情，则可以在URL.revokeObjectURL(img.src)功能中加上img.onload。
参考：
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.createObjectUrldocs
您也可以改用window.URL.createObjectUrl创建对象URL。
FileReader具有更好的浏览器支持。
FileReader方法适用于FF6 / Chrome。我不确定将FileReader设置为FileReader是否有效并且可以跨浏览器浏览。
创建对象URL是正确的方法。
编辑：
如注释Img.src支持中所述，而FF6 / Chrome浏览器似乎无法使用脱机。
这里是使用Blob的window.URL（如Raynos所述，它具有更好的浏览器支持）。在此示例中，我还缩放了Canvas以适合图像。
在现实生活中，您可能会将图像缩放到最大程度，以使您的表单不会爆炸;-)。这是complete example (Fiddle)。