在创建图像之前使用 jCrop 和 cloudinary through rails 4 进行裁剪

Posted 2023-03-25

【中文标题】在创建图像之前使用 jCrop 和 cloudinary through rails 4 进行裁剪

【英文标题】：Using jCrop with cloudinary through rails 4 to crop before creating image

【发布时间】：2014-02-19 12:09:37

【问题描述】：

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

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

此外，当我提交照片时，现在我在裁剪合身时遇到了相互冲突的变换！=crop

这是我的代码...

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

photos.js.coffee

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（我在控制器中为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 %>

【问题讨论】：

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

【参考方案1】：

好的，我通过执行以下操作解决了它...从更新回调中删除了@，这使得字段使用裁剪参数进行更新（我的语法错误）。然后我坚持将裁剪值存储在模型中并摆脱了 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

在我看来是这样的：

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