Multiple specific cropped positions a single Paperclip record

_form.html.erb

<!-- to your form partial. yes, you could do this more dynamically, but for illustrative purposes. -->
 <select id="style_select">
  <option></option>
  <option value="cover" data-style-options='{"option": "setCropBoxData", "data": {"width": 1200, "height": 628}}'>Cover</option>
  <option value="medium" data-style-options='{"option": "setCropBoxData", "data": {"width": 628, "height": 840}}'>Medium</option>
  <option value="small_sq" data-style-options='{"option": "setCropBoxData", "data": {"width": 470, "height": 470}}'>Small Square</option>
  <option value="thumb" data-style-options='{"option": "setCropBoxData", "data": {"width": 128, "height": 128}}'>Thumb</option>
</select>
<% %w{cover large medium medium_sq small small_sq thumb}.each do |w| %>
  <%=w%>: <input class="form-control style_data" data-style-for="<%=w%>" type="text" name="image[crop][<%=w%>]" placeholder=""><br/>
<% end %>

<script>
    $('#style_select').on('change', function() {
        var t = $('#style_select option:selected').attr('data-style-options');
        var j = JSON.parse(t);
        $('.img-container > img').cropper(j.option, j.data);
    });
    $('#set').on('click', function() {
        var sel = $('#style_select option:selected');
        $('.style_data[data-style-for="' + sel.val() + '"]').val(JSON.stringify($('.img-container > img').cropper("getCropBoxData")));
    });
</script>

gistfile1.txt

If you have sizes, say,

``
has_attached_file :content,
:styles=>{:cover => "1200x628#", :medium => "626x840#", :small_sq => "470x470#", :thumb => "64x64#"
``

And you want to crop them individually them using something like [cropper](http://fengyuanchen.github.io/cropper/), here's the tricks.

Ensure that you're all ready to go with the Cropper demo. Drop the assets in and load up the page.

Add this guy to your form partial:

  

gistfile2.txt

and you should be ready to go. make sure you permit the attributes.

image.rb

# add ManualCrop as a processor 

has_attached_file :content,
                    :styles=>{ :cover => "1200x628#", :medium => "626x840#",:small => "470x246#", :thumb => "64x64#"},
                    :processors => [:shiny],
                    
...

 attr_accessor :cropper_data

  def cropping?
    !self.cropper_data.nil?
  end

  def convert_options(style)
    {
    :left => self.cropper_data[style]['left'],
    :top => self.cropper_data[style]['top'],
    :width => self.cropper_data[style]['width'],
    :height => self.cropper_data[style]['height']
    }
  end

manual_crop.rb

# /lib/paperclip_processors/manual_crop.rb

module Paperclip
  class ManualCrop < Thumbnail
    def transformation_command
      if crop_command
        crop_command + super.join(' ').sub(/ -crop \S+/, '').split(' ')
      else
        super
      end
    end

    def crop_command
      if @attachment.instance.cropping?
        target = @attachment.instance.convert_options(options[:style])
        ["-crop","#{target[:width].to_i}x#{target[:height].to_i}+#{target[:left].to_i}+#{target[:top].to_i}"]
      end
    end

  end
end