js-cropbox
A lightweight and simple js extension to crop your image.
Install
Via NPM:
npm install js-cropbox
Via Bower:
bower install js-cropbox
Usage
Include:
Create the skeleton:
CropStartReset-+
Configuration of plugin:
var cropbox = '#plugin' variants: width: 200 height: 200 minWidth: 180 minHeight: 200 maxWidth: 350 maxHeight: 350 width: 150 height: 200 ;// scalingvar scaleInBtn = document;scaleInBtn;var scaleOutBtn = document;scaleOutBtn;cropbox;// image loading from a filevar fileInput = document startBtn = document;startBtn;// resetvar resetBtn = document;resetBtn;// cropvar cropBtn = document;cropBtn;// the cropped eventcropbox;// the reset event{ // clear the container documentinnerHTML = ''; // clear information about crop documentvalue = '';};cropbox;// the ready eventcropbox;// the disabled/enabled event{ scaleInBtn; scaleOutBtn; cropBtn;};;cropbox;cropbox;
Options
cb
{String|HTMLElement} 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 = '#plugin';
As an option:
var cropbox = cb: '#plugin';
[variants]
{Object} 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;
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.