Client side image resizatron

First we use the File API to insert an image into a canvas.

Input Data URL

We can get the raw image data from the file field as a data URL.

Output Data URL

We can pull the modified data URL from the canvas. This is raw image data. You can upload this to your server

Output image (right click to save)

Finally we can use the processed image data in an image tag. Full client side image processing and saving.