如何在Canvas上从HTML5 File API中绘制图像？
我想在canvas上绘制一个用HTML5 File API打开的图像。
在handleFiles(e)方法中，我可以通过e.target.files[0]访问File，但是我不能直接使用drawImage绘制图像。 如何从HTML5canvas上的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实例，该实例可以在canvas上绘制： http : //jsfiddle.net/t7mv6/ 。
要获取图像，请使用new Image() 。 src需要是引用到所选File的URL。 您可以使用URL.createObjectURL来获取引用到Blob （ File也是Blob ）的URL： 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，否则你会泄漏内存。 如果你没有做太疯狂的事情，你可以在img.onload函数中添加一个URL.revokeObjectURL(img.src) 。
参考文献：
现场示例
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 文档
您也可以使用FileReader来创build对象URL。
FileReader有略好的浏览器支持。
FileReader方法在FF6 / Chrome中可用。 我不确定是否将Img.src设置为Blob是有效的并且跨浏览器。
创build对象url是正确的方法。
编辑：
正如在window.URL支持中所提到的，离线在FF6 / Chrome中似乎不可用。
这是一个完整的例子（Fiddle）使用FileReader （它有更好的浏览器支持，如Raynos所述）。 在这个例子中，我也缩放canvas以适应图像。
在现实生活中，例如，您可以将图片放大到最大程度，以便您的表格不会炸毁;-)。 这里是缩放（小提琴）的例子 。
