The Image Cropping Interface of the Filepicker v2 library

Gives your users the power to crop the images they upload. Conversions are performed in the browser using the Canvas API. Crop UI is avaliable in both single and multiple file mode. To crop previously uploaded images use the filepicker.processImage() method.

To include the Crop UI in the picker add the 'CONVERT' service to the services list. 'CONVERT' is included by default. You can also include the 'conversions' parameter to include rotate and filter functions in addition to the cropping tool: conversions: ['crop', 'rotate', 'filter']

Syntax

The javascript processImage() function can be called using a blob or filestack url as the input. You may pass in an optional dictionary of key-value pairs to customize the options of the crop dialog. Handler functions are also optional, and can be passed in as callback functions for the events onSuccess, and onError.

An additional note on browser support, the Crop UI works on desktop and mobile browsers that support the Canvas API.

Quick Jump:

A Blob or Filestack URL pointing to the image you would like to crop. If you have a external url you need to use the filepicker.store call to first generate a Blob

convert_options

optional dictionary of key-value pairs that determine how the cropper behaves

Conversions

Array

conversions: ['crop', 'rotate', 'filter']

When used in conjunction with the 'CONVERT' service, the conversions array allows you to specify what functions are available in the UI for the user. Include 'crop' to allow the user to crop an image, include 'rotate' to allow a user to rotate the uploaded image left or right, include filter to allow user to blur or sharpen the uploaded image. You can include all the services or a selection of the three. If 'CONVERT' is specified, but no conversions are set, the default behavior is to display the cropping tool only.

Crop ratio

Double

cropRatio: 4/3

Specify the crop area height to width ratio. This can be a float, an integer or a ratio like 4/3 or 16/9. By default it is not specifed.

Crop area dimensions

Array

cropDim: [width, height]

Specify a crop area with fixed dimenions. e.g. : cropDim: [800, 600]. The user will only be allowed to move the crop area. If the image is smaller than the specified dimensions the crop area will fill the image.

Max crop dimensions

Array

cropMax: [width, height]

Specify the maximum dimensions of the crop area. e.g. : cropMax: [800, 600]. If the image is smaller than the specified dimensions it won't be applied. Can be used in conjunction with cropRatio and cropMin.

Min crop dimensions

Array

cropMin: [width, height]

Specify crop area minimum dimensions. e.g. : cropMin: [400, 300]. Can be used together with cropMax and cropRatio

Force to crop

Boolean

cropForce: true

If set to true, the user will have to crop all images before uploading them. This works for both single and multiple files mode but no if 'hide' option is set to true. By default set to false.

Crop Area Dimensions

cropDim: [width, height]

Specify a crop area with fixed dimenions. e.g. : cropDim: [800, 600]. The user will only be allowed to move the crop area. If the image is smaller than the specified dimensions the crop area will fill the image.

Max Crop Dimensions

cropMax: [width, height]

Specify the maximum dimensions of the crop area. e.g. : cropMax: [800, 600]. If the image is smaller than the specified dimensions it won't be applied. Can be used in conjunction with cropRatio and cropMin.

Min Crop Dimensions

cropMin: [width, height]

Specify crop area minimum dimensions. e.g. : cropMin: [400, 300]. Can be used together with cropMax and cropRatio