Tiny Native JavaScript Image Cropper – Croppr.js

Category: Image , Javascript | July 8, 2018
Author: jamesssooi
Views Total: 1,825 views
Official Page: Go to website
Last Update: July 8, 2018
License: MIT

Preview:

Tiny Native JavaScript Image Cropper – Croppr.js

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

You Might Be Interested In:


Leave a Reply