Client side image resizatron

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

Choose a file zoom: {{image.zoom}} x: {{image.x}} y: {{image.y}}

Input Data URL

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

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

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