Croppola logo

Getting Started Technical Support


Flexible Cropping Fixed-ratio Cropping Fixed-shape Cropping Command Line Thumbnail Creation Python

Croppola Documentation – Examples

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.

Example image Bird.jpgExample image House.jpgExample image Flower.jpg

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);