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

Question

我从事此工作已有一段时间了。我正在使用 cloudinary 上传照片，并尝试在照片创建操作上使用 jcrop 实现裁剪功能。在我实现 cloudinary 之后，我在 Jcrop 上关注了 railscasts #182。我认为我在获取新的裁剪参数时遇到了问题 (x ,y,w,h) 在图片保存之前返回给上传者。

更新:我什至没有将值放入 f.text_fields。当我四处移动裁剪器时，应该有新的值吧？这是空字段的图片:

另外，当我提交照片时，现在我在 crop fit 上遇到了相互冲突的转换!=crop

这是我的代码...

图片 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

照片.js.咖啡

update = (coords) ->
  $("#crop_x").val coords.x
  $("#crop_y").val coords.y
  $("#crop_w").val coords.w
  $("#crop_h").val coords.h
$(document).ready ->
  $(".cloudinary-fileupload").fileupload(
    dropZone: "#dropzone"
    start: (e) ->
      $(".status").text "Starting upload..."

    progress: (e, data) ->
      $(".status").text "Uploading... " + Math.round((data.loaded * 100.0) / data.total) + "%"

    fail: (e, data) ->
      $(".status").text "Upload failed"
  ).off("cloudinarydone").on "cloudinarydone", (e, data) ->
    $("#photo_bytes").val data.result.bytes
    $(".status").text ""
    $(".preview").html($.cloudinary.image(data.result.public_id,
      format: data.result.format
      width: 400
      height: 400
      crop: "fit"
      id: "jcrop_target"
    )).css height = "400"
    $("#jcrop_target").Jcrop
      aspectRatio: 1
      setSelect: [100, 0, 200, 200]
      onSelect: @update
      onChange: @update

photo.rb(我在controller中设置了crop_x,y,w,h的params.permit)

class Photo < ActiveRecord::Base
    belongs_to :master
    belongs_to :dog
    mount_uploader :image, ImageUploader
    validates_presence_of :image
    attr_accessor :crop_x, :crop_y, :crop_w, :crop_h
    before_create :crop_image

    def crop_image
        image.recreate_versions! if crop_x.present?
    end

end

照片/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 %>

Answer 1

好的，我通过执行以下操作解决了它...取消了更新回调的 @，这使得字段使用裁剪参数进行了更新(我的语法错误)。然后我坚持将裁剪值存储在模型中并摆脱了 image.revisions!回调，然后将以下代码放入我的 uploader 中:

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") %>