Upload and Fixed-Ratio Cropping

Download this example

(Single HTML file with included CSS and JavaScript.)

This example shows a simplified interface using a fixed aspect ratio. The user can still drag and resize the rectangle. If desired, your JavaScript code can interact with the crop rectangle.

The source code consists of three parts:

CSS code
HTML DIV with all elements
JavaScript code

Copy all three parts into your own web page, and adapt it to your needs. Areas marked with "ADJUST THIS" are places where you want to make modifications. You can obviously make modifications in other places, too.

If you have any questions or feedback regarding the code, please contact us.

Croppola panel

This is the croppola DIV you can copy into your HTML file. You can adjust the size as desired. Personalize the "Use this crop" button by writing the desired JavaScript code.

Drop your photo here
to crop it

or click to choose a photo

Image: (not available)

Choose another file ...

Crop: (not available)

Use this crop

Example images (optional)

Example images are pre-loaded on the server and can be selected with a single click. They don't require any time-consuming uploading. You can send us up to 10 images for pre-loading on the server.

JavaScript interface (optional)

From your JavaScript code, you can still set parameters. Click on the example calls below, and observe the crop rectangle.

		setLeft(40);
		setTop(40);
		setRight(40);
		setBottom(40);
		setWidth(200);
		setHeight(200);

		setX0(60);
		setY0(60);
		setX1(520);
		setY1(230);

		setHorizontalAlignment(0.5);
		setVerticalAlignment(0.5);

		setAspectRatio(16.0 / 9.0);
		setAspectRatio(9.0 / 16.0);
		setCropSize(100000);
		setAspectRatioAndCropSize(2.0 / 1.0, 100000);

		setAutomaticCrop('croppola', 16.0 / 10.0, 0.9);

		alert(currentImage);
		alert(currentImage.cropMode);
		alert(currentImage.finalCrop.width);
	