Rails 5.1 - MiniMagick＆amp; Jcrop for Carrierwave图片上传

Question

我有一个图片上传器＆amp;上传的裁剪方法。但是，一旦我上传图像，就不会选择所选的裁剪区域，而是裁剪图像的不同区域。

我使用回调启动了裁剪方法：after_update

Rails 5.1 - MiniMagick - 载波 - JQuery-Jcrop

应用程序/上传/ image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base

  include CarrierWave::MiniMagick

  storage :aws

  def store_dir
    if Rails.env == 'development'
      "development/#{model.class.to_s.underscore}/#{model.id}/#{mounted_as}"
    elsif Rails.env == 'staging'
      "stage/#{model.class.to_s.underscore}/#{model.id}/#{mounted_as}"
    elsif Rails.env == 'production'
      "production/#{model.class.to_s.underscore}/#{model.id}/#{mounted_as}"
    end
  end

  version :large do
    process resize_to_limit: [1024, 1024]
  end

  version :medium, :from_version => :large do
    process resize_to_limit: [800, 800]
  end

  version :small, :from_version => :medium do
    process resize_to_limit: [300, 300]
  end

  version :thumb, :from_version => :small do
    process resize_to_limit: [100, 100]
  end

  version :square do
    process :crop
    process resize_to_fill: [600, 600]
  end

  def extension_whitelist
    %w(jpg jpeg gif png)
  end

  def crop
    if model.crop_x.present?
      resize_to_limit(600,600)
      manipulate! do |img|
        x = model.crop_x.to_i
        y = model.crop_y.to_i
        w = model.crop_w.to_i
        h = model.crop_h.to_i
        img.crop("#{w}x#{h}+#{x}+#{y}")
        img
      end
    end
  end

end

/form.html.erb

...
<%= form.hidden_field "crop_x", id: "crop_x" %>
<%= form.hidden_field "crop_y", id: "crop_y" %>
<%= form.hidden_field "crop_w", id: "crop_w" %>
<%= form.hidden_field "crop_h", id: "crop_h" %>

<div id="image_upload">
  <div class="image-upload">
     <div class="field" style="width:600px; min-height:400px;">
        <img style="width:100%;" id="cropbox" onload="javascript:initiateImageCropper()">
          <%= form.file_field :image, id: :image, onchange: 'mountImageUpload(event)' %>
      </div>
    </div>
  </div>

  <div id="image_preview">
      <div class="image-preview">
        <div style="width:100px; height:100px; overflow:hidden;">
          <img id="preview">
        </div>
      </div>
  </div>
...