KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
I would like to draw an image opened with the HTML5 File API on a canvas. 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? 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>
Tags (comma-separated)
Save Edits
Cancel