JavaScript API to Crop Images

Open Source JavaScript Library that supports cropping JavaScript Apps.

Cropper is an open source JavaScript library that allows cropping images in your browser. Using the API you an add enhanced cropping features in your application with 27 different methods, 39 different options, and 6 events. Using the API you can easily work and crop your images in your browser.

This library provide support to wide range of cropping features. It support cropping images via touch screen, zooming, rotating, scaling & flipping, using multiple croppers, allows croping images on canvas, allows cropping images on browser-side canvas with cross-browser supports.

Previous Next

Getting Started with Cropper

The recommended way to install cropper via NPM. Please use the following command to install it.

Install cropper via NPM

 npm install cropperjs 

Crop Images inside JavaScript Apps

The Cropper library gives software programmers the capability to programmatically crop their images using JavaScript. In order to crop image, you need to load image and ensure that the size of the image fits the container perfectly. After you have your image ready, you can perfrom set of cropping features on the given x and y coordinates including rotating, flipping, scaling, and setting height and widht as per your requirement. .

Crop Images in Browser using JavaScript

You can add image cropping functionality in your apps and users can crop images directly from browser. User can upload or drag drop images in the browser and apply cropping features on it. The API provides cross-browser combatibiliy. The API works fine using latest version of Chrome, FireFox, Safari, Opera, Edge and Ineternet Explorer.

Using Cropping Methods in JavaScript

In order to provide flexibiliy, the API provies a bunch of methods to crop images. These methods help the developer to add image cropping featues in the application easily. The API provide the method crop() to crop the image. Furthermoe, you can use reset(), clear(), replace(), enable(), diable(), distroy(), move(), zoom(), roatat(), scale(), getData(), setData(), getCanvasData() and more.