Image Crop

Cropping an image in the browser doesn't actually delete data from the original file you uploaded. The UI you see is just a visual overlay.

When you click Download, the engine paints a specific rectangular section of your original image onto a brand new, smaller HTML5 Canvas in memory, and exports that new canvas.

To execute the crop, the tool uses the complex 9-parameter version of the HTML5 Canvas drawImage API:

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

When you drag the crop box on the screen, you are defining the Source Coordinates (sx, sy, sWidth, sHeight). This tells the browser exactly which rectangle of pixels to "cut out" of the original massive image array.

It then paints those selected source pixels onto the new canvas at the Destination Coordinates (which for a standard crop is always dx=0, dy=0, the top-left corner).

The resulting canvas now only contains the cropped pixels, and is passed to the browser's encoder to generate a new JPG or PNG file.