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

我已经有一段时间了。 我正在使用cloudinary上传照片，并尝试使用jcrop在照片创建动作上实现裁剪function。在我实施cloudinary后，我在Jcrop上跟踪了railscast＃182。我认为我在获取新的裁剪参数时遇到问题（x ，y，w，h）在保存图像之前返回上传器。

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

此外，当我提交照片时，现在我对裁剪适应性的转换发生了冲突！=裁剪

这是我的代码……

image_uploader.rb

class ImageUploader  ["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

 
 
Change Profile Photo.
 
 
 
 
 
Select the upload button or drag and drop an image.
       url, role: "form") do |f| %> <!--
  
  
 
--> 
  
 
   
  
 
 
 
 
 
 
     
 
   
 
    
    <a href="https://stackoverflow.com/questions/21401445/using-jcrop-with-cloudinary-through-rails-4-to-crop-before-creating-image/">Back to Master edit.  
 
 
 
   

Answer 1

您可以查看以下链接，了解有关使用Carrierwave进行裁剪的自定义坐标的信息： http ：//cloudinary.com/documentation/rails_carrierwave#custom_coordinates_based_cropping

Answer 2

好吧，我通过执行以下操作解决了这个问题…从更新回调中取消了@，这使得字段得到了裁剪参数的更新（我的语法很糟糕）。 然后我坚持将裁剪值存储在模型中并摆脱了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") %>