我需要 jcrop 预览方面的帮助。我正在关注railscasts #182 中的本教程,但是出了点问题,我似乎可以弄清楚。这有点难以解释,但裁剪预览不起作用,裁剪调整大小手柄内出现第二张图像。这个额外的图像会随着裁剪的大小而拉伸和倾斜。由于这有点令人困惑,而且我的应用程序仍在我的本地计算机上,因此我包含了当前功能的视频演示 以及我认为下面的所有相关代码。
我还向 jcrop 发送了一封电子邮件,他们建议这可能是由于我的预览区域中的错误引起的。我认为这是正确的,因为我目前使用的是 Ryan Bates 的 railscasts tut 提供的。我认为可能是问题的唯一另一件事是“attr_accessible”和“attr_accessor”。我是 ruby 和 rails 的新手,所以我很难理解我的错误。任何帮助将不胜感激,如果我能提供任何进一步的信息,请告诉我。
首先是我的 avatar_uploader.rb
class AvatarUploader < CarrierWave::Uploader::Base
include CarrierWave::RMagick
storage :file
# Override the directory where uploaded files will be stored.
# This is a sensible default for uploaders that are meant to be mounted:
def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end
version :large do
resize_to_limit(600, 600)
end
version :thumb do
process :crop
resize_to_fill(100, 100)
end
version :mini do
process :crop
resize_to_fill(48, 48)
end
version :nano do
process :crop
resize_to_fill(20, 20)
end
def crop
if model.crop_x.present?
resize_to_limit(600, 600)
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
end
用户.rb
class User < ActiveRecord::Base
belongs_to :team
# Define roles
ROLES = %w[admin conference president tailgater author banned]
# Include default devise modules. Others available are:
# :token_authenticatable, :encryptable, :confirmable, :lockable, :timeoutable and :omniauthable
devise :database_authenticatable, :registerable,
:recoverable, :rememberable, :trackable, :validatable
# Setup accessible (or protected) attributes for your model
attr_accessible :email, :password, :password_confirmation, :remember_me,
:role, :avatar, :team_id
#Include uploader
mount_uploader :avatar, AvatarUploader
attr_accessor :crop_x, :crop_y, :crop_w, :crop_h
after_update :crop_avatar
def crop_avatar
avatar.recreate_versions! if crop_x.present?
end
end
作物.html.erb
<h1>Crop Avatar</h1>
<%= image_tag @user.avatar_url(:large), id: "cropbox" %>
<h4>Preview</h4>
<div style="width:100px; height:100px; overflow:hidden">
<%= image_tag @user.avatar.url(:large), :id => "mypreview" %>
</div>
<%= form_for @user do |f| %>
<% %w[x y w h].each do |attribute| %>
<%= f.hidden_field "crop_#{attribute}" %>
<% end %>
<div class="actions">
<%= f.submit "Crop" %>
</div>
<% end %>
users.js.coffee
jQuery ->
new AvatarCropper()
class AvatarCropper
constructor: ->
$('#cropbox').Jcrop
aspectRatio: 1
setSelect: [0, 0, 600, 600]
onSelect: @update
onChange: @update
update: (coords) =>
$('#user_crop_x').val(coords.x)
$('#user_crop_y').val(coords.y)
$('#user_crop_w').val(coords.w)
$('#user_crop_h').val(coords.h)
@updatePreview(coords)
updatePreview: (coords) =>
$('#preview').css
width: Math.round(100/coords.w * $('#cropbox').width()) + 'px'
height: Math.round(100/coords.h * $('#cropbox').height()) + 'px'
marginLeft: '-' + Math.round(100/coords.w * coords.x) + 'px'
marginTop: '-' + Math.round(100/coords.h * coords.y) + 'px'