Skip to content
A lightweight and simple js extension to crop your image.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
src
tests
.eslintrc.js
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
Dockerfile
Gruntfile.js
README.md
bower.json
docker-compose.yml
karma.conf.js #3 Apr 29, 2017
package.json

README.md

js-cropbox

Build Status Coverage Status npm

A lightweight and simple js extension to crop your image.

Demo

Install

Via NPM:

npm install js-cropbox

Via Bower:

bower install js-cropbox

Usage

Include:

<link href="build/cropbox.min.css" rel="stylesheet">
<script type="text/javascript" src="build/cropbox.min.js"></script>

Create the skeleton:

<div id="plugin"></div>
<input id="file-input" type="file" accept="image/*">
<button id="btn-crop" type="button">Crop</button>
<button id="btn-start" type="button">Start</button>
<button id="btn-reset" type="button">Reset</button>
<button id="btn-scale-out" type="button">-</button>
<button id="btn-scale-in" type="button">+</button>
<br>
<div id="cropped-container"></div>
<textarea id="cropped-data"></textarea>

Configuration of plugin:

var cropbox = new Cropbox('#plugin', {
    variants: [
        {
            width: 200,
            height: 200,
            minWidth: 180,
            minHeight: 200,
            maxWidth: 350,
            maxHeight: 350
        },
        {
            width: 150,
            height: 200
        }
    ]
});
// scaling
var scaleInBtn = document.querySelector('#btn-scale-in');
scaleInBtn.addEventListener('click', function(){
    cropbox.scale(1.05);
});
var scaleOutBtn = document.querySelector('#btn-scale-out');
scaleOutBtn.addEventListener('click', function(){
    cropbox.scale(0.95);
});
cropbox.getMembrane().addEventListener('wheel', function(event){
    if (event.deltaY < 0) {
        cropbox.scale(1.01);
    } else {
        cropbox.scale(0.99);
    }
    event.preventDefault();
});
// image loading from a file
var fileInput = document.querySelector('#file-input'),
    startBtn = document.querySelector('#btn-start');
startBtn.addEventListener('click', function(){
    var fileReader = new FileReader();
    fileReader.readAsDataURL(fileInput.files[0]);
    fileReader.addEventListener('load', function(event){
        cropbox.load(event.target.result);
    });
});
// reset
var resetBtn = document.querySelector('#btn-reset');
resetBtn.addEventListener('click', function(){
    cropbox.reset();
});
// crop
var cropBtn = document.querySelector('#btn-crop');
cropBtn.addEventListener('click', function(){
    cropbox.crop();
});
// the cropped event
cropbox.getCb().addEventListener('cb:cropped', function(event){
    // add image to the container
    var img = document.createElement('img');
    img.src = event.detail.data.image;
    img.setAttribute('style', 'margin-right: 5px; margin-bottom: 5px');
    img.className = 'img-thumbnail';
    document.querySelector('#cropped-container').appendChild(img);
    // update inforamtion about crop
    document.querySelector('#cropped-data').value = JSON.stringify(cropbox.getData());
});
// the reset event
function resetHandler(){
    // clear the container
    document.querySelector('#cropped-container').innerHTML = '';
    // clear information about crop
    document.querySelector('#cropped-data').value = '';
};
cropbox.getCb().addEventListener('cb:reset', resetHandler);
// the ready event
cropbox.getCb().addEventListener('cb:ready', resetHandler);
// the disabled/enabled event
function disabledHandler(){
    scaleInBtn.setAttribute('disabled', 'disabled');
    scaleOutBtn.setAttribute('disabled', 'disabled');
    cropBtn.setAttribute('disabled', 'disabled');
};
disabledHandler();
cropbox.getCb().addEventListener('cb:disabledCtrls', disabledHandler);
cropbox.getCb().addEventListener('cb:enabledCtrls', function(){
    scaleInBtn.removeAttribute('disabled');
    scaleOutBtn.removeAttribute('disabled');
    cropBtn.removeAttribute('disabled');
});

Options

{String|HTMLElement} cb

The main html element of cropbox container.

You can set it option as first argument of the construct method of Cropbox class or as option:

As a first argument:

var cropbox = new Cropbox('#plugin');

As an option:

var cropbox = new Cropbox({
    cb: '#plugin'
});

{Object} [variants]

Variants of crop image. Supported a few crop settings.

By default variants content following settings:

variants = [
    {
        width: 200,
        height: 200,
        minWidth: 200,
        minHeight: 200,
        maxWidth: 350,
        maxHeight: 350
    }
]

Required:

  • width - Width of frame crop (px).
  • height - Height of frame crop (px).

Optional:

  • minWidth - Minimal width of frame crop for resize it (px).
  • maxWidth - Maximum width of frame crop for resize it (px).
  • minHeight - Minimal height of frame crop for resize it (px).
  • maxHeight - Maximum height of frame crop for resize it (px).

You can set both one options max(min)Width/max(min)Height and all for resize frame crop.

Methods

scale(step)

Scale an image.

Arguments:

  • {Number} step: Step number for scale an image.

load(src)

Load an image for cropping.

Arguments:

  • {String} src: Data URL or absolute URL to load an image.

reset()

Reset the crop history.

crop()

Crop an image.

getData()

Returns: An Array contain the cropped data where index is the index of variants of crop image.

getCb()

Returns: An HTMLElement the main cropbox element.

getMembrane()

Returns: An HTMLElement the membrane element.

getImage()

Returns: An HTMLElement the image element.

getFrame()

Returns: An HTMLElement the frame element.

getWorkarea()

Returns: An HTMLElement the workarea element.

getResize()

Returns: An HTMLElement the resize control element.

getVersion()

Returns: An String version cropbox.

getVariants()

Returns: An Array contain variants for cropping.

Events

cb:cropped

The event running after to crop an image.

In the event transfering property data containing data about a cropped image. You can use it via event argument as event.detail.data.

Example usage:

cropbox.getCb().addEventListener('cb:cropped', function(event){
    console.log(event.detail.data);
});

cb:reset

The event running after to reset crop history.

cb:disabledCtrls

The event running after to disable controls.

cb:enabledCtrls

The event running after to enable controls.

cb:ready

The event running when the crop to ready image cropping.

Build

Using Docker

Run dev environment:

docker-compose up

Run Grunt:

docker-compose run --rm ext npm run build

Using locale dev environment

npm install
npm run build

Run tests

Using Docker

docker-compose run --rm ext npm run test

Using locale dev environment

npm run test

License

js-cropbox is released under the BSD 3-Clause License.

You can’t perform that action at this time.