jQuery Resize and Crop (jrac)

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.

Demo

Move the image or the crop with the pointer, resize the crop with the pointer, use the zoom bar to scale the image or set your values into the inputs.

crop x
crop y
crop width
crop height
image width
image height
lock proportion

Code

Here is the code use in this page. You can find some documentation in the README.txt file.

$(document).ready(function(){
  // Apply jrac on some image.
  $('.pane img').jrac({
    'crop_width': 250,
    'crop_height': 120,
    'crop_left': 100,
    'crop_top': 100,
    'image_width': 400,
    'viewport_onload': function() {
      var $viewport = this;
      var inputs = $viewport.$container.parent('.pane').find('.coords input:text');
      var events = ['jrac_crop_x','jrac_crop_y','jrac_crop_width','jrac_crop_height','jrac_image_width','jrac_image_height'];
      for (var i = 0; i < events.length; i++) {
        var event_name = events[i];
        // Register an event with an element.
        $viewport.observator.register(event_name, inputs.eq(i));
        // Attach a handler to that event for the element.
        inputs.eq(i).bind(event_name, function(event, $viewport, value) {
          $(this).val(value);
        })
        // Attach a handler for the built-in jQuery change event, handler
        // which read user input and apply it to relevent viewport object.
        .change(event_name, function(event) {
          var event_name = event.data;
          $viewport.$image.scale_proportion_locked = $viewport.$container.parent('.pane').find('.coords input:checkbox').is(':checked');
          $viewport.observator.set_property(event_name,$(this).val());
        })
      }
    }
  })
  // React on all viewport events.
  .bind('jrac_events', function(event, $viewport) {
    var inputs = $(this).parents('.pane').find('.coords input');
    inputs.css('background-color',($viewport.observator.crop_consistent())?'chartreuse':'salmon');
  });
});
    

Download