Question

我提到了这一集的railscast http://railscasts.com/episodes/182-cropping-images

但每当我按下裁剪按钮时我收到错误

convert.exe：选项`-crop'的参数无效：'YYYxYYY + YYY + YYY' - 自动定向 @ 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

您的系统似乎没有发送或处理所需的裁剪坐标：

Javascript未更新隐藏字段
JCrop没有捕获/处理正确的数据
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＆gt; hidden fields

<强>滑轨

这里可能存在的问题可能是Rails对params的处理

您将form_for var作为@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

回形针剪裁轨道

1 个答案: