回形针剪裁导轨

Question

我提到railscasts http://railscasts.com/episodes/182-cropping-images

的这个情节，但每当我压在裁剪按钮 我得到一个错误

CONVERT.EXE：对于选项'-crop无效参数“：” YYYxYYY + YYY + YYY'-auto-orient @ error/convert.c/ConvertImageCommand/1124。

Y是取决于所选区域的值。

请建议我纠正这个错误。

这是我的控制器代码：

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

我的裁剪视图文件：

<%= 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

看起来像你的系统要么不发送或处理所需的作物坐标：

1. JavaScript未更新隐藏字段
2. JCrop没有捕捉/
3. Rails的不是读书的PARAMS正常

---

JS

处理正确的数据

您可能需要编写你的JS代码：

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); 

由于未正确加载，您的JCrop可能无法加载

---

JCrop

你可能有另一个问题是JCrop没有捕捉到正确的数据

你需要确保你的隐藏字段实际上得到填充数据。你update_crop代码看起来不错 - 所以我想看看view_source>hidden fields

---

Rails的

这里的可能的问题可能是则params的Rails的处理

你通过你的form_for var as @artist_profile

我会在你的控制器中执行此操作（考虑到你正在使用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