Paperclip Cropping rails - ruby-on-rails

Question

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>

Answer 1

Looks like your system is either not sending or processing the required crop co-ordinates:
Javascript is not updating the hidden fields
JCrop is not capturing / processing the right data
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