Getting Started

Filestack Architecture

File Upload

File Export (Save To)

Responsive Images

Image Transformations

Document Transformations

Video Transcoding

Audio Transcoding





Filestack Viewer


Supported Cloud Drives

Filestack Recipes

Filestack Integrations

Filestack SDKs

Register for an API key

Crop Widget - instantiate the CropUI with a simple HTML tag

Give your uers the power to crop the images they upload. Introducing Crop UI for the filestack dialog. Conversion is performed in the browser using Canvas API. Crop UI is avaliable in both single and multiple file mode.

Sample Code
<input data-fp-button-class="btn btn-primary"
  name="myName" />

Additional Options

data-fp-url Required The url of the image you want the user to crop.

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.

data-fp-crop-dim Specify the dimensions the image should have after being cropped. Eg. data-fp-crop-dim="800,600". Using cropDim the user is able to resize the crop area within a fixed ratio. The selected area will be resized to the dimensions specified by the cropDim parameter.
data-fp-crop-max Specify the maximum dimensions of the crop area. e.g. : data-fp-crop-max="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.

data-fp-crop-min Specify crop area minimum dimensions. e.g. : data-fp-crop-max="400, 300". Can be used together with cropMax and cropRatio

data-fp-crop-force If set to true, the user will have to crop all images before uploading them. This works for both single and multiple files mode. By default set to false.