Upload and Flexible Cropping

Download this example

(Single HTML file with included CSS and JavaScript.)

This example shows the croppola interface with all configuration options. The user can select aspect ratio and crop size, and let croppola make an automatic suggestion, or move the crop rectangle manually.

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 with tool box

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

Auto

Manual

Aspect ratio Toggle crop orientation

Crop size

small medium big

Crop using

Croppola Image center

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.