CODEWITHSUNDEEP
ruby-on-railspaperclip
Sibendu
Sibendu

Reputation: 49

Paperclip Cropping rails

I referred this episode of railscasts http://railscasts.com/episodes/182-cropping-images

But whenever I press on the crop button I get an error

convert.exe: invalid argument for option `-crop': 'YYYxYYY+YYY+YYY'-auto-orient @ error/convert.c/ConvertImageCommand/1124.

Y being the values depending on the selected area.

Please suggest me to rectify this bug.

This is my controller code:

 def crop_photo
    @artist_profile=ArtistProfile.find(params[:id])
    @artist_profile.update_attributes(params[:artist_profile])
    if @artist_profile.save
      format.js
    end

My cropping view file :

<%= stylesheet_link_tag "jquery.Jcrop" %>
<%= javascript_include_tag "jquery.Jcrop" %>
<div style="max-width: 720px;">
<%= nested_form_for @artist_profile, :url => cropped_photo_path ,:html => { :method => :post } ,:remote => true do |f| %>
<%= image_tag @artist_profile.photo.url(:large), :id => "cropbox" %>
<%= hidden_field_tag "artist_profile_id", @artist_profile.id %>
<h4>Preview:</h4>
<div style="width:100px; height:100px; overflow:hidden">
<%= image_tag @artist_profile.photo.url(:thumb), :id => "preview_image" %>
</div>
<% for attribute in [:crop_x, :crop_y, :crop_w, :crop_h] %>
<%= f.hidden_field attribute, :id => attribute %>
<% end %>
<p><%= f.submit "Crop" %></p>
<% end %>
</div>

<script type="text/javascript" charset="utf-8">
$(function() {
  $('#cropbox').Jcrop({
    onChange: update_crop,
    onSelect: update_crop,
    setSelect: [0, 0, 500, 500],
    aspectRatio: 1
  });
});

function update_crop(coords) {
  var rx = 100.00/coords.w;
  var ry = 100.00/coords.h;
  $('#preview_image').css({
    width: Math.round(rx * <%= @artist_profile.photo_geometry(:large).width %>) + 'px',
    height: Math.round(ry * <%= @artist_profile.photo_geometry(:large).height %>) + 'px',
    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
    marginTop: '-' + Math.round(ry * coords.y) + 'px'
  });
  var ratio = <%= @artist_profile.photo_geometry(:original).width %> / <%= @artist_profile.photo_geometry(:large).width %>;
  $("#crop_x").val(Math.round(coords.x * ratio));
  $("#crop_y").val(Math.round(coords.y * ratio));
  $("#crop_w").val(Math.round(coords.w * ratio));
  $("#crop_h").val(Math.round(coords.h * ratio));
}
</script>

Upvotes: 2

Views: 424

Answers (1)

Richard Peck
Richard Peck

Reputation: 76784

Looks like your system is either not sending or processing the required crop co-ordinates:

  1. Javascript is not updating the hidden fields
  2. JCrop is not capturing / processing the right data
  3. Rails is not reading the params properly

JS

You may want to write your JS code like this:

var jCrop = function() {
  $('#cropbox').Jcrop({
    onChange: update_crop,
    onSelect: update_crop,
    setSelect: [0, 0, 500, 500],
    aspectRatio: 1
  });
};

$(document).ready(jCrop);
$(document).on("page:load", jCrop);

Your JCrop could be prevented from loading due to not loading correctly

JCrop

The other issue you may have is JCrop not capturing the right data

You need to make sure your hidden fields are actually getting populated with the data. Your update_crop code looks okay - so I would look at view_source > hidden fields

Rails

The likely problem here is probably Rails' processing of the params

You're passing your form_for var as @artist_profile

I would do this in your controller (considering you're using Rails 4):

 def crop_photo
    @artist_profile = ArtistProfile.find(params[:id])
    @artist_profile.update_attributes(crop_params)
    if @artist_profile.save
      format.js
    end
 end

 private

 def crop_params
     params.require(:artist_profile).permit(:crop_x, :crop_y, :crop_h, :crop_w)
 end

Upvotes: 1

Related Questions