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中，Ryan的解决方案是通过查找大版本和原始版本之间的比率来将坐标转换为与原始图像一起使用。通过遵循相同的逻辑，我能够使用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

如果我正确理解了这个问题，更简单的方法就是向Jcrop发送trueSize选项。

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

Ryan刚刚更新了railscast＃182，它现在使用了CarrierWave

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

Carrierwave作物特定版本

3 个答案: