How to upload image into HTML5 canvas

Question

I am currently using http://paperjs.org to create an HTML5 canvas drawing app. I want to let users upload images into the canvas. I know I need to make a login and signup but is there an easier way? I have seen the HTML5 drag and drop upload.

Answer 1

I assume you mean, to load an image into the canvas and not uploading the image from the canvas.

It'd probably be a good idea to read through all the canvas articles they have over here https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

But basically what you want to do is create an image in javascript, and set the image.src = to whatever the file location is. In the case of loading images from the user on their end, you're going to want to use the File System API.

Threw together a brief example here: http://jsfiddle.net/influenztial/qy7h5/

function handleImage(e){     var reader = new FileReader();     reader.onload = function(event){         var img = new Image();         img.onload = function(){             canvas.width = img.width;             canvas.height = img.height;             ctx.drawImage(img,0,0);         }         img.src = event.target.result;     }     reader.readAsDataURL(e.target.files[0]);      }