PaperCropper gem

PaperCropper gem is a gem for cropping images using cropper js and Paperclip

All examples are based on a cover attachment

migrations

create_table :gallery_albums do |t|
  t.attachment        :cover # paperclip required
  t.crop_attachment   :cover # add extra columns for crop
end

model

# aspect 1:1
crop_attached_file :cover

# aspect 16:4
crop_attached_file :cover, aspect: '16:4'

# free (without aspect restriction)
crop_attached_file :cover, aspect: false

controler

Take care of permitted params. Add the following fields to permitted strong attributes:

params.require(:model).permit(:cover, :cover_crop_x, :cover_crop_y, :cover_crop_width, :cover_crop_height, :cover_crop_ratio)

javascripts

//= require cropper
//= require paper_cropper

// Crop
$('.crop-image-container').each(function(){
  papercropper = new PaperCropper(this, {})
});

scss

@import "cropper";
@import "paper_cropper";

paper_cropper is only required for this rule:

/* Limit image width to avoid overflow the container */
.crop-image-container img.crop-image {
  max-width: 100%; /* This rule is very important, please do not ignore this! */
}

helpers

helper, with twitter bootstrap classes, custom formatted, and other things

<%= form_for ..... do |f| %>
  <%= f.tws_cropper_box :cover %>
<% end %>

custom (without helper)

if you do not want to use helper, you can do what you want, for example you could make the file selector ".crop-image-file-input" below the picture "crop-image-wrapper"

the most important thing is to keep the "crop-image ..." classes and "crop-image-container" and "crop-image-wrapper" containers

for example:

<!-- [required] Main container (you need to supply this in JS constructor) -->
<div class="crop-image-container">
  <!-- [required] Hidden input for save the crop values -->
  <input class="crop-image-value-x"       type="hidden" name="cover_crop_x"       value="">
  <input class="crop-image-value-y"       type="hidden" name="cover_crop_y"       value="">
  <input class="crop-image-value-width"   type="hidden" name="cover_crop_width"   value="">
  <input class="crop-image-value-height"  type="hidden" name="cover_crop_height"  value="">
  <input class="crop-image-value-ratio"   type="hidden" name="cover_crop_ratio"   value="">

  <!-- [required] Wrap the image or canvas element with a block element (container) -->
  <div class="crop-image-wrapper">
    <!-- [required] Image to crop -->
    <img class="crop-image" src="">
  </div>

  <!-- [required] File input for change the image -->
  <input class="crop-image-file-input" type="file">

  <!-- [optional] Buttons -->
  <button class="crop-image-btn-zoom-in"     type="button">Zoom in</button>
  <button class="crop-image-btn-zoom-out"    type="button">Zoom out</button>
  <button class="crop-image-btn-move-left"   type="button">Move left</button>
  <button class="crop-image-btn-move-right"  type="button">Move right</button>
  <button class="crop-image-btn-move-up"     type="button">Move up</button>
  <button class="crop-image-btn-move-down"   type="button">Move down</button>
</div>

License

About CodiTramuntana

coditramuntana

PaperCropper is maintained by CodiTramuntana. PaperCropper is the mix of cropper js and Paperclip and some glue code to make things easier.

The names and logos for CodiTramuntana are trademarks of CodiTramuntana SL.

We love open source software!