Carrierwave作物特定版本

Question

我正在研究使用carrierwave和Jcrop裁剪圖像的能力。它是Railscasts第182集和第253集的組合。我裁剪工作，但它裁減原始。無論如何強迫manupulate!使用不同的版本？

def crop_image(x,y,w,h) 
    manipulate! do |img| 
    img.crop(x.to_i, y.to_i, w.to_i, h.to_i) 
    end 
end 

或者有沒有辦法從模型調用中設置版本？

attr_accessor :crop_x, :crop_y, :crop_w, :crop_h 
attr_accessible :description, :image, :crop_x, :crop_y, :crop_w, :crop_h 
after_update :reprocess_image, :if => :cropping? 

def cropping? 
    !crop_x.blank? && !crop_y.blank? && !crop_w.blank? && !crop_h.blank? 
end 


def reprocess_image 
    image.crop_image(crop_x, crop_y, crop_w, crop_h) 
end 

Answer 1

在railscast，瑞安的解決方案是將COORDS轉換通過查找大版本和原始版本之間的比例與原始圖像的工作。通過遵循相同的邏輯，我能夠使其與Carrierwave和jCrop一起工作。有趣的是，Carrierwave不存儲圖像的尺寸。我能夠從這篇文章中破解一些東西：http://code.dblock.org/ShowPost.aspx?Id=194。

這是我的解決方案。

user.rb

class User < ActiveRecord::Base 

    attr_accessor :password, :crop_x, :crop_y, :crop_h, :crop_w 
    after_update :reprocess_profile, :if => :cropping? 

    mount_uploader :profile, ProfileUploader 

    def cropping? 
    !crop_x.blank? && !crop_y.blank? && !crop_w.blank? && !crop_h.blank? 
    end 

    def profile_geometry 
    img = Magick::Image::read(self.profile.current_path).first 
    @geometry = {:width => img.columns, :height => img.rows } 
    end 

    private 

    def reprocess_profile 
    self.profile.recreate_versions! 
    end 

end 

account_controller.rb

class AccountController < ApplicationController 

    def crop 
    @account = current_user 
    end 

    def crop_update 
    @account = current_user 
    @account.crop_x = params[:account]["crop_x"] 
    @account.crop_y = params[:account]["crop_y"] 
    @account.crop_h = params[:account]["crop_h"] 
    @account.crop_w = params[:account]["crop_w"] 
    @account.save 
    redirect_to account_path 
    end 

end 

profile_uploader.rb

class ProfileUploader < CarrierWave::Uploader::Base 

    def extension_white_list 
    %w(jpg jpeg gif png) 
    end 

    version :large do 
    process :resize_to_fit => [500, 500] 
    end 

    version :thumb do 
    process :manualcrop 
    process :resize_to_fill => [100, 100] 
    end 

    def manualcrop 
    return unless model.cropping? 
    manipulate! do |img| 
     img = img.crop(model.crop_x.to_i,model.crop_y.to_i,model.crop_h.to_i,model.crop_w.to_i) 
    end 
    end 

end 

crop.html.erb

<% content_for :head do %> 
<%= stylesheet_link_tag "jquery.Jcrop" %> 
<%= javascript_include_tag "jquery.Jcrop.min" %> 
<script type="text/javascript" charset="utf-8"> 
$(function() { 
    $('#cropbox').Jcrop({ 
    onChange: update_crop, 
    onSelect: update_crop, 
    setSelect: [0, 0, 500, 500], 
    aspectRatio: 1 
    }); 
}); 

function update_crop(coords) { 
    var rx = 100/coords.w; 
    var ry = 100/coords.h; 
    var lw = $('#cropbox').width(); 
    var lh = $('#cropbox').height(); 
    var ratio = <%= @account.profile_geometry[:width] %>/lw ; 

    $('#preview').css({ 
    width: Math.round(rx * lw) + 'px', 
    height: Math.round(ry * lh) + 'px', 
    marginLeft: '-' + Math.round(rx * coords.x) + 'px', 
    marginTop: '-' + Math.round(ry * coords.y) + 'px' 
    }); 
    $("#crop_x").val(Math.round(coords.x * ratio)); 
    $("#crop_y").val(Math.round(coords.y * ratio)); 
    $("#crop_w").val(Math.round(coords.w * ratio)); 
    $("#crop_h").val(Math.round(coords.h * ratio)); 
} 
</script> 
<% end %> 

<%= image_tag @account.profile_url(:large), :id => "cropbox" %> 

<h3>Preview</h3> 
<div class="preview"> 
    <%= image_tag @account.profile_url(:large), :id => "preview" %> 
</div> 

<%= form_for @account, :as => :account, :url => { :action => "crop_update" } do |f| %> 
    <% for attribute in [:crop_x, :crop_y, :crop_h, :crop_w] %> 
     <%= f.hidden_field attribute, :id => attribute %> 
    <% end %> 
    <p><%= f.submit "Crop" %></p> 
<% end %> 

的style.css

.preview { 
    width:100px; 
    height:100px; 
    overflow:hidden; 
} 

Answer 2

如果我理解正確的問題更簡單的方法是發送trueSize選項給Jcrop。

<% geo = @item.image_geometry %> 
$('#cropbox').Jcrop({boxWidth:656,boxHeight:350,onChange:update_crop,onSelect: update_crop,aspectRatio:656/350,trueSize:[<%= "#{geo[0]}, #{geo[1]}"%>]}); 

Answer 3

瑞恩剛剛更新railscasts＃182，它採用CarrierWave現在

http://railscasts.com/episodes/182-cropping-images-revised