marker.js

CROPRO Documentation: Getting started

Getting started with CROPRO

CROPRO is a JavaScript browser library to enable image cropping, rotation, flipping, and straightening in your web applications. Add CROPRO to your web app and instantly add an image cropping feature to your app. You can save, share, or otherwise process the results.

Installation

npm

Using a modern JavaScript/TypeScript environment? Just run:

npm install cropro
or
yarn add cropro

to add CROPRO to your project.

From CDN or local file

Just add a script tag referencing the cropro.js library.

<script src="https://unpkg.com/cropro/cropro.js"></script>

In this case, we are referencing the library through the UNPKG CDN. For other options, please see the Downloads section.

Usage

To add image cropping functionality to your web application follow these 3 easy steps:

  1. Create an instance of cropro.CropArea by passing a target image reference to the constructor.
  2. Set an event handler for render event.
  3. Call the show() method.

Here's a simple example:

// skip this line if you are importing CROPRO into the global space via the script tag import * as cropro from 'cropro'; // create an instance of CropArea and pass the target image reference as a parameter let cropArea = new cropro.CropArea(document.getElementById('myimg')); // register an event listener for when user clicks OK/save in the CROPRO UI cropArea.addRenderEventListener(dataUrl => { // we are setting the cropping result to replace our original image on the page // but you can set a different image or upload it to your server document.getElementById('myimg').src = dataUrl; }); // finally, call the show() method and CROPRO UI opens cropArea.show();

See also

Check out the "all defaults" demo for the simplest implementation of CROPRO in action.

Next »