Cropper.js

Front-end library for image manipulation

Build

Run npm install;
Install gulp CLI: npm install --global gulp-cli;
Install webpack CLI: npm install --global webpack;
Run webpack --watch in root directory - this is for monitoring changes in files;
Run gulp in root directory to start dev-server and build application. After each files update the project will be recompiled and build minimized js.

The final files will locates in ./dist/main.js and ./dist/*.css

Installation

Just include the file named 'main.js' from dist directory to your website, before closing body tag.

Also for correct working of some functions, you need to add(if it has not been done before) popper.min.js script to your website:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>

And if you will use it on mobile devices you need to add this script:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

Since the module depends on jQuery, it is necessary to add it after jQuery library in document.

Usage

Define in your document html container:

<div id="cropper-container"></div>

Then use constructor for create library instance:

let cropper = new Cropper({
    container: 'cropper-container',
    handlerUrl: 'http://YOUR_IP:SERVER_PORT',
    dest: ['var/www/YOUR_SITE','uploads/images'],
});

//will show an image(short syntax)
cropper.addPhotos([
    {
        "url":"https://images.pexels.com/photos/1236701/pexels-photo-1236701.jpeg",
        "thumbnail":"https://images.pexels.com/photos/1236701/pexels-photo-1236701.jpeg"
    }
]);

//you can also use image model which was previously generated by this module
//use this syntax for load previously edited images
cropper.addPhotos([
    {
        "url":"https://images.pexels.com/photos/1236701/pexels-photo-1236701.jpeg",
        "thumbnail":"https://images.pexels.com/photos/1236701/pexels-photo-1236701.jpeg",
        "size":{"width":15,"height":10},
        "dest":["var/www/YOUR_SITE","uploads"],
        "paper":"",
        "original":false,
        "crop":{"x":18,"y":22,"w":67.94055201698514,"h":31.768498859793976},
        "rotate":0,
        "border":"",
        "zoom":"1.5699999999999998",
        "top":-143,
        "left":-77
    }
]);

//send photo to processing backend(will not add image to UI, just send to backend)
cropper.process(['...SAME OBJECTS AS ABOVE'], (result) => {console.log(result)});

//callback for Order button click
//return an array with an objects that describes how the image was edited(see object sample above)
cropper.onImagesProcessed((images) => {console.log(images)})

At that point, the module is initialized and running. See docs for more information.