Jquery Faux Crop

Fork on Github

This plugins resizes and positions the image inside a container to act as if it had been cropped. It finds the largest centered square area on the original image and fits it into the thumbnail wrapper. You can also pass crop coordinates as you would do with an image processor.

If you rather render the necessary markup from a rails helper (without using javascript at all), check RailsHelperFauxCrop

example A
example B

Basic Usage: Centered thumbnail

          image_path  : "example_image.jpg",
          width       : 800, // image original width
          height      : 406, // image orinal height
          target_size : 200  // thumbnail size

Using Crop Coordinates

          image_path         : "example_image.jpg",
          width              : 800,
          height             : 406,
          target_size        : 200
          original_crop_x    : 40,
          original_crop_y    : 140,
          original_crop_size : 130

Data attributes

You can either pass the options when calling the function or write them as data attributes on the element:

<div class='media' data-image-path="example_image.jpg" data-width="800" data-height="406" data-target-size="200" data-original-crop-x="40" data-original-crop-y="140" data-original-crop-size="130"></div>