jQuery Resize And Crop (jrac) is a jQuery plugin that build a viewport around a given image permitting to visually resize an image and place a crop
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
example fixed example of crop_x and crop_y Jun 20, 2012
jrac Fix dependencies information. Mar 29, 2014
COPYRIGHT.txt Fixes #36. Jan 6, 2015
LICENSE.txt initial commit Jun 25, 2011
README.md Fixes #36. Jan 6, 2015
bower.json Fix dependencies information. Mar 29, 2014



jQuery Resize And Crop (jrac) is a jQuery plugin that build a viewport around a given image permitting to visually resize an image and place a crop. Then it is possible to use the coordinates data to be used for any purpose.



or install with bower:

bower install --save jrac




  • Resize and move image
  • Resize and move crop
  • Resize viewport
  • Aims to be integrated with any server side image processor


The jrac method implement the whole business which can take an optional setting object argument:


The default setting object is the following:

  var settings = {
    'crop_width': 200,
    'crop_height': 100,
    // The two following properties define the crop position (relative to the
    // image).
    'crop_x': 0,
    'crop_y': 0,
    'crop_resize': true,
    'image_width': null,
    'image_height': null,
    'zoom_min': 100,
    'zoom_max': 3000,
    'viewport_image_surrounding': false, // Set the viewport to surround the image on load
    'viewport_width': null,
    'viewport_height': null,
    'viewport_resize': true,
    // The two following properties allow to position the content (negative
    // value allowed). It can be use to focus the viewport on the cropped
    // part of the image.
    'viewport_content_x': 0,
    'viewport_content_y': 0,
    // Submit here a callback function (context is the viewport), see below.
    'viewport_onload': null

The viewport_onload property can take an function callback which interface is:

  function() // which the context is $viewport

The $viewport context is a div jQuery wrapped element that surrounds the target image. This object has the following subsequent properties:

  • $viewport.$container: a container holding the viewport and the zoom widget.
  • $viewport.$image: the target image, jQuery-wrapped.
  • $viewport.$crop: the crop object.
  • $viewport.observator: an object which processes all events of the viewport.

The main method of the $viewport.observator is register which registers an element for an event:

  $viewport.observator.register(String event_name, jQuery wrapped elements[, callback onevent_callback])

To unregister an event, use:

  $viewport.observator.unregister(string event_name)

The observator events are the following which you can then trigger some actions on with the jQuery bind method or by giving a function to the onevent_callback argument:

  • jrac_crop_x
  • jrac_crop_y
  • jrac_crop_width
  • jrac_crop_height
  • jrac_image_width
  • jrac_image_height


  $('img').jrac({'viewport_onload', function() {
    var $viewport = this;
    $viewport.register('jrac_crop_x', $('input#cropx'), function(event_name, element, value) {

There is also an event jrac_events which is triggered on every events of the previous decribed viewport observator. Use the jQuery bind method to act on it.

Destroy jrac (not much tested) is done by running jrac with the destroy argument:



All jrac code is released under the GNU General Public License. See COPYRIGHT.txt and LICENSE.txt.