Author: | jamesssooi |
---|---|
Views Total: | 4,855 views |
Official Page: | Go to website |
Last Update: | July 8, 2018 |
License: | MIT |
Preview:

Description:
Croppr.js is a simple, lightweight, customizable JS plugin used to crop any images with configurable Aspect Ratio, Min/Max sizes and much more.
Install the Croppr.js:
# NPM $ npm install croppr # Bower $ bower install croppr
How to use it:
Import the croppr:
import Croppr from 'croppr';
Or directly insert the stylesheet croppr.css and JavaScript file croppr.js into your webpage.
<script src="dist/croppr.js"></script> <link rel="stylesheet" href="dist/croppr.css">
Create a new instance and specify the selector which holds the image you want to crop.
<img src="1.jpg" alt="" id="cropper">
var croppr = new Croppr('#cropper', { // settings here });
var croppr = new Croppr('#cropper', { // custom aspect radio // e.g. aspectRatio: null, // min/max sizes maxSize: { width: null, height: null }, minSize: { width: null, height: null }, // start size of crop region startSize: { width: 100, height: 100, unit: '%' }, // real", "ratio" or "raw" returnMode: 'real', // callback functions onCropStart: function(data) { console.log(data.x, data.y, data.width, data.height); }, onCropMove: function(data) { console.log(data.x, data.y, data.width, data.height); }, onCropEnd: function(data) { console.log(data.x, data.y, data.width, data.height); }, onInitialize: function(instance) { // do things here } });
API methods.
// returns the crop region croppr.getValue(); // moves the crop region to the specified coordinates croppr.moveTo(x,y); // resizes the crop region to the specified size croppr.resizeTo(Width, Height, Origin Array); // scales the crop region by a factor. origin is an optional argument that specifies the origin point (in ratio) to resize from in the format of [x, y] croppr.scaleBy(Factor, Origin Array); // Resets the crop region croppr.reset();
Changelog:
07/08/2018
- Fix getValue returning wrongly rounded values