Installation

<script src="https://cdn.jsdelivr.net/gh/BossBele/cropzee@latest/dist/cropzee.js" defer></script>

Usage

		$(document).ready(function(){
		    $("#input").cropzee();
		});

Image Previewing

Add data-cropzee="inputID" (data-cropzee attribute with value corresponding to the id of the input on which cropzee is initialized).

A
W
H
W
H
W
H
                             

Options

Option Explanation Value Type Values Default
allowedInputs supported input files (by extension names) Array of strings
  • 'gif'
  • 'png'
  • 'jpg'
  • 'jpeg'
    • *any extension     		['gif','png','jpg','jpeg']
    imageExtension cropped image file-type (extension) String
  • 'image/jpeg'
  • 'image/png'
    		•  'image/jpeg'
    returnImageMode image data to be returned, 'blob' for blob object or 'data-url' for dataURL String
  • 'data-url'
  • 'blob'
    		•  'data-url'

    From Croppr:

    Option Explanation Value Type Values Default
    aspectRatio Constrain the crop region to an aspect ratio. Number all positive whole numbers or decimals null
    maxSize Constrain the crop region to a maximum size. [width, height, unit?] eg [200, 200, 'px'] or [20, 20, '%'] null
    minSize Constrain the crop region to a minimum size. [width, height, unit?] eg [200, 200, 'px'] or [20, 20, '%'] null
    startSize The starting size of the crop region when it is initialized. [width, height, unit?] eg [200, 200, 'px'] or [20, 20, '%'] [100, 100, '%']
    onCropStart A callback function that is called when the user starts modifying the crop region. Function eg 
    function(data) { console.log(data.x, data.y, data.width, data.height); }
    		 null
    onCropMove A callback function that is called when the crop region changes. Function eg 
    function(data) { console.log(data.x, data.y, data.width, data.height); }
    		 null
    onCropEnd A callback function that is called when the user stops modifying the crop region. Function eg 
    function(data) { console.log(data.x, data.y, data.width, data.height); }
    		 null
    onInitialize A callback function that is called when the Croppr instance is fully initialized. Function eg 
    function(instance) { // do things here 
					}
    		 null

    From Light Modal:

    Option Explanation Value Type Values Default
    modalAnimation animate.css animation on modal when opening / showing and closing / hiding String eg bounce * use animate.css animation names ''

    Methods

    Method Explanation Parameter Type Parameter Return
    cropzeeGetImage(input) method to get the cropped or inserted image. cropzee doesn't return the image as the input value String input selector eg '#my-input' blob or dataURL (depends on returnImageMode option)

    Dependencies