zara-4/crop-select-js

A simple image cropping selection jQuery plugin.

CropSelectJs

A simple image cropping selection jQuery plugin., _(*1)

View working example >, _(*2)

, _(*3)

By Zara 4 image compression service, _(*4)

Installation

• Bower: bower install crop-select-js --save
• NPM: npm install crop-select-js
• Zip: Download

You will need to include both crop-select-js.min.js and crop-select-js.min.css into your web page., _(*5)

• Packagist Page
• NPM Page

Basic Example

Html code, _(*6)

<div id='crop-select'></div>

Javascript code, _(*7)

$('#crop-select').CropSelectJs({
  imageSrc: 'path/to/image.jpg'
});

Functions

To call a function on a CropSelectJs element, follow the pattern below. Replace the text 'function' with the name of the function you wish to call., _(*8)

$('#crop-select').CropSelectJs('function')

The functions available are listed below:, _(*9)

Events

Event 'selectionResize'

This event is triggered when the crop selection is resized., _(*10)

You can attach a callback by either providing a callback function when initialising, or by attaching an event listener., _(*11)

To attach the event listener when initialising, do:, _(*12)

$('#element').CropSelectJs({

  // Set the image
  imageSrc: 'path/to/image.jpg',

  // Set the selection resize event handler
  selectionResize: function(payload) {
    // Do something...
  }

});

Alternatively you can attach an event listener (which can be after initialisation) by:, _(*13)

$('#element').on('crop-select-js.selection.resize', function(payload) {
  // Do something...
});

Payload Object

The payload that is given on this event will have the structure:, _(*14)

{
  width,              // The width of the selection on screen
  height,             // The height of the selection on screen
  widthScaledToImage, // The width of the selection scaled to the image
  heightScaledToImage // The height of the selection scaled to the image
}

Event 'selectionMove'

This event is triggered when the crop selection is moved., _(*15)

You can attach a callback by either providing a callback function when initialising, or by attaching an event listener., _(*16)

To attach the event listener when initialising, do:, _(*17)

$('#element').CropSelectJs({

  // Set the image
  imageSrc: 'path/to/image.jpg',

  // Set the selection move event handler
  selectionMove: function(payload) {
    // Do something...
  }

});

Alternatively you can attach an event listener (which can be after initialisation) by:, _(*18)

$('#element').on('crop-select-js.selection.move', function(payload) {
  // Do something...
});

Payload Object

The payload that is given on this event will have the structure:, _(*19)

{
  x,              // The x coordinate of the selection on screen
  y,              // The y coordinate of the selection on screen
  xScaledToImage, // The x coordinate of the selection scaled to the image
  yScaledToImage  // The y coordinate of the selection scaled to the image
}

License

CropSelectJs is released under the GNU GPL 3.0 license. View license, _(*20)