Image Crop for CKEditor

Introduction | Demo | Installation | Configuration | Price | Support | FAQ

Configuration

The configuration is provided as a single "imagecrop" object in the configuration of each editor, example:

// Configuration for ImageCrop
config.imagecrop = {
      cropsizes : [
            {width:120, height:120, title:"120px square", name:"Thumbnail"},
            {width:400, height:300, title:"400 * 300", name:"Content picture"},
            {width:960, height:350, title:"960 * 350", name:"Big header"},
            {width:0, height:0, title:"No restrictions", name:"Free crop"}
            ],
      formats : [
            { title:"JPG - Low quality", value:"jpg60"},
            { title:"JPG - Normal quality", value:"jpg80", attributes:"selected"},
            { title:"JPG - High quality", value:"jpg90"},
            { title:"PNG (for texts)", value:"png"}
            ],
      maximumDimensions : {width:1024, height:1024}
};

The "cropsizes" property defines the cropping sizes that you want to allow, you must add an array of objects. Each object has four properties:

  • "width"
  • "height"
  • "title"
  • "name"

Width of the resized area
Height of the resized area
Tooltip that will be shown while hovering the button
Text of the button that the user will see

You can define as many options (Buttons) as you want.
To create a "Free crop" option (so the user will be able to crop the image at any size), set "width" & "height" to zero.

After selecting the cropped area, the user has the option to select the quality that will be used to save the image, you can modify the available options with the formats property:

formats : [
      { title:"JPG - Low quality", value:"jpg60"},
      { title:"JPG - Normal quality", value:"jpg80", attributes:"selected"},
      { title:"JPG - High quality", value:"jpg90"},
      { title:"PNG (for texts)", value:"png"}
      ],

At the moment the maximum set of options is limited to the four ones provided above, you can remove any one that you don't like or change the default one

Finally, if the user presses OK on the dialog without cropping the image you can force it to be resized to a maximum width and height (preserving the ratio) with the maximumDimensions setting:

maximumDimensions : {width:1024, height:1024}

 

Use it

Clear your cache and reload your editor. 
Now add an image (drag&drop, take a screenshot and paste it, use the Upload button, ...), and the cropping dialog will popup:

  • If you just press "OK" then it will be uploaded without changes
  • If you select a size, then the cropping rectangle will appear that allows to select the area of interest in the picture
    By pressing "Crop" you can finally select the quality according to the options that you have allowed

If you have any question, please contact us.