Croppola logo

Getting Started Technical Support

Examples

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

Croppola Documentation – Examples

Upload and Fixed-Shape Cropping

Download this example

croppola-fixed-shape-cropping.zip

(Single HTML file with included CSS and JavaScript.)

This example shows an alternate cropping interface suitable for all kinds of shapes. The user drags and scales (mouse wheel) the picture to position it within a selected shape.

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.

Your desired shape
Select rectangle Select circle Select heart
Your Picture  
Upload...
Upload a picture to start.
Use this crop
+
Click or Drag Image Here
Cover

Note: Croppola produces a rectangular crop by default, no matter what shape you choose here. To maintain a high image quality, the actual shape is usually cut further down in the processing chain, e.g. when composing the final PDF file (example). Please let us know what documents we can generate for you.