Crop and rotate image

How it works

The crop rectangle is given in pixels measured from the top-left corner of the original image, and the region inside it is copied onto a canvas. The rotation is applied afterwards to that cut-out, so the numbers you typed never move when you change the angle. Turning by 90 or 270 degrees swaps the width and height of the result; 180 leaves them as they are. The output keeps the source format where the browser can produce it — JPG, PNG or WebP — and otherwise falls back to PNG, with white painted behind the picture for JPG because JPEG has no alpha channel. A rectangle that runs past the edge of the image, a zero-sized side or a non-whole number is refused before anything is drawn.

Worked example

An 800 × 600 photo cropped at x 100, y 50 with 400 × 300 fits: 100 + 400 = 500 is inside 800, and 50 + 300 = 350 is inside 600. The cut-out is 400 × 300, and rotating it 90 degrees swaps the sides, so the result row reads 300 × 400 px. Rotating again runs the same crop from the original image, so the rectangle stays 400 × 300 every time instead of shrinking.

Questions and answers