Can I load a local file into an html canvas element?

Question

My goal is to have users on iPad load an image into a canvas, then get the base 64 encoded said image all while being OFFLINE JSFiddle JSFiddle Code ```

Accepted Answer

I have a functioning fiddle (based on the prior work of this answer) that demonstrates how to upload an image using a file input, place it inside a canvas, and read the base64 data URL back out.

In short, you should:

- Use the File API to read in the image (you might do this in an `onchange` listener of the input element):

```
var file = input.files[0];
var fr = new FileReader();
fr.onload = createImage;   // onload fires after reading is complete
fr.readAsDataURL(file);    // begin reading
```

- In your FileReader's `onload` callback (here, `createImage`), read the `result` of the FileReader (here, `fr.result`). That's your image data URL!

OPTIONAL STEPS (only needed if you plan to manipulate the images on a canvas):

- In your FileReader's `onload` callback (here, `createImage`), make a new `Image` object and set its `src` to the `result` of the FileReader:

```
img = new Image();
img.onload = imageLoaded;
img.src = fr.result;
```

- Finally, in your Image's `onload` callback, draw it to the canvas and then use `canvas.toDataUrl` to the data:

```
canvas.width = img.width;      // set canvas size big enough for the image
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0);         // draw the image

// do some manipulations...

canvas.toDataURL("image/png");  // get the data URL
```

Can I load a local file into an html canvas element?

Solution

Problem

Related problems