Lightweight, Awesome Vanilla JS Image Cropper | Croppr.js

vanilla-js-image-cropper

Croppr.js is a lightweight and gorgeous vanilla javascript image crop that has absolutely no dependencies.

Features:

  • Lightweight (<6KB minified and compressed)
  • Made only with delicious Original Vanilla JS
  • Zero Dependencies
  • Supports touch devices!
  • TypeScript writing included!

How to make use of it:

Installation:

npm install croppr -—save
// CommonJS
var Croppr = require('croppr');

// ES6 import
import Croppr from 'croppr';

Usage

<img src="path/to/image.jpg" id="croppr"/>
var cropInstance = new Croppr('#croppr', {
  // ...options
});

Options

aspectRatio

Constrain the crop region to an aspect ratio.

  • Type: Number
  • Default: null
  • Example: aspectRatio: 1 (Square)

maxSize

Constrain the crop region to a maximum size.

  • Type: [width, height, unit?]
  • Default: null
  • Example: maxSize: [50, 50, '%'] (A maximum size of 50% of the image size)

Note: unit accepts a value of ‘px’ or ‘%’. Defaults to ‘px’.

minSize

Constrain the crop region to a minimum size.

  • Type: [width, height, unit?]
  • Default: null
  • Example: minSize: [20, 20, 'px'] (A minimum width and height of 20px)

Note: unit accepts a value of ‘px’ or ‘%’. Defaults to ‘px’.

startSize

The starting size of the crop region when it is initialized.

  • Type: [width, height, unit?]
  • Default: [100, 100, '%'] (A starting crop region as large as possible)
  • Example: startSize: [50, 50] (A starting crop region of 50% of the image size)

Note: unit accepts a value of ‘px’ or ‘%’. Defaults to ‘%’.

native javascript image cropper library, Croppr.js plugin/github


See Demo And Download

Official Website(jamesssooi): Click Here

This superior jQuery/javascript plugin is developed by jamesssooi. For extra advanced usage, please go to the official website.

Share