Ruby on rails 通过rails 4使用jCrop和cloudinary在创建图像之前进行裁剪

我已经做了一段时间了。我正在使用cloudinary上传照片，并试图在照片创建操作中使用jcrop实现裁剪功能。在我实现cloudinary后，我在jcrop上遵循了railscasts#182。我想在保存图像之前，将新裁剪的参数（x、y、w、h）返回到上传程序时遇到了问题

更新：我甚至没有将值放入f.text_字段。当我移动裁剪器时，应该会有新值，对吗？下面是一张空字段的图片：

另外，当我提交照片时，现在我得到了关于裁剪适合度的冲突转换！=裁剪

这是我的密码

image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base
  #include Sprockets::Helpers::RailsHelper
  #include Sprockets::Helpers::IsolatedHelper

  include Cloudinary::CarrierWave

  process :tags => ["profile pic"]
  process :convert => "jpg"

  version :thumbnail 
    process :crop
    eager
    resize_to_fill(150, 150)
    cloudinary_transformation :quality => 80          
  end 

  # For more options, see
  # http://cloudinary.com/documentation/rails_integration#carrierwave

  def crop
  if model.crop_x.present?
    resize_to_limit(400, 400)
    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!(x, y, w, h)
    end
  end
end

photo.rb（我已在控制器中设置了作物x、y、w、h的参数许可证）

class-Photo

照片/new.html.erb

<div id="dropzone">
<h1>Change Profile Photo.</h1>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
      <div id="direct_upload">
        <p>Select the upload button or drag and drop an image.</p>
        <% if params[:photo_option] == "dog_photo" %>
          <% url = master_dog_photos_path %>
        <% else %>
          <% url = master_photos_path %>
        <% end %>
          <%= form_for(@photo, :url => url, role: "form") do |f| %>
          <!--<div class="form_line">
            <%= f.label :title, "Title:" %>
            <div class="form_controls">
              <%= f.text_field :title %>
            </div>
          </div>-->
          <div class="form_line form-group">
            <%= f.label :image, "Image:" %>

            <div class="form-group">
              <div class="upload_button_holder">
                <%= link_to "Upload", "#", class: "btn btn-primary btn-lg upload_button" %>
                <%= f.cl_image_upload(:image) %>
              </div>
              <span class="status"></span>
            </div>
          </div>

          <div class="form-group">
            <div class="form_controls">
              <div class="preview"></div>
            </div>
          </div>

            <%= f.text_field :crop_x, id: "crop_x"%>
            <%= f.text_field :crop_y, id: "crop_y"%>
            <%= f.text_field :crop_w, id: "crop_w"%>
            <%= f.text_field :crop_h, id: "crop_h"%>

          <div class="form-group">
            <div class="form_controls">
              <%= f.submit "Submit Photo", class: "btn btn-lg btn-success" %>
              <% if @error %><span class="error"><%= @error %></span><% end %>
            </div>
          </div>
          <%= f.hidden_field :bytes %>
          <%= hidden_field_tag :direct, params[:direct] %>
        <% end %>
      </div>

      <% if params[:photo_option] == "dog_photo" %>
      <% link_to "Back to House", master_path(@master) %>
      <% else %>
        <a href="<%= edit_master_registration_path %>">Back to Master edit.</a>
      <% end %>
    </div>
  </div>
</div>
</div>

<!-- Configure Cloudinary jQuery plugin -->
<%= cloudinary_js_config %>

更改个人资料照片。
选择上载按钮或拖放图像

url，角色：“表单”）do | f |%>

好的，我通过执行以下操作解决了问题…取消了更新回调中的@，并使用裁剪参数更新了字段（我的语法不好）。然后我将裁剪值持久存储在模型中，并删除image.revisions！回调，然后将以下代码放入我的上载程序中：

class ImageUploader < CarrierWave::Uploader::Base
  #include Sprockets::Helpers::RailsHelper
  #include Sprockets::Helpers::IsolatedHelper

  include Cloudinary::CarrierWave

  process :tags => ["profile pic"]
  process :convert => "jpg"

  version :thumbnail do
    cloudinary_transformation :transformation => [
        {:width => 400, :height => 400, :crop => :limit}]
    process :custom_crop 
  end  

  def custom_crop
    return :x => model.crop_x, :y => model.crop_y, 
      :width => model.crop_w, :height => model.crop_h, :crop => :crop
  end
end

class ImageUploader[“配置文件pic”]
进程：convert=>“jpg”
版本：缩略图可以吗
cloudinary_转换：转换=>[
{：宽度=>400，：高度=>400，：裁剪=>：限制}]
过程：自定义作物
结束
自定义作物
return:x=>model.crop\ux，:y=>model.crop\uy，
：width=>model.crop\u w，：height=>model.crop\u h，：crop=>：crop
结束
结束

其次，我认为：

<%= image_tag(@dog.photos.last.image.thumbnail.url, :width => 150, :height => 150, :crop => :fill, class: "img-circle center") %>

150，：height=>150，：crop=>：fill，class:“img圆心”）%%>

您能解释一下如何在上传图像之前显示预览并对其进行裁剪吗？在railscast的一集中，他首先上传了预览。我在跟踪您的代码时遇到了问题。我没有使用cloudinary，但我希望在上传之前仍能进行裁剪。

class ImageUploader < CarrierWave::Uploader::Base
  #include Sprockets::Helpers::RailsHelper
  #include Sprockets::Helpers::IsolatedHelper

  include Cloudinary::CarrierWave

  process :tags => ["profile pic"]
  process :convert => "jpg"

  version :thumbnail do
    cloudinary_transformation :transformation => [
        {:width => 400, :height => 400, :crop => :limit}]
    process :custom_crop 
  end  

  def custom_crop
    return :x => model.crop_x, :y => model.crop_y, 
      :width => model.crop_w, :height => model.crop_h, :crop => :crop
  end
end

<%= image_tag(@dog.photos.last.image.thumbnail.url, :width => 150, :height => 150, :crop => :fill, class: "img-circle center") %>