我使用Rails 4宝石mini_magick,carrierwave,jcrop护栏-V2和引导,青菜。 我有它保存作物之后的图像的图片上传,但我需要之前裁剪节省的引导模式。 发现这个教程: http://mark.stratmann.me/content_items/image-cropping-with-rails-3-2-carrierwave-bootstrap-modals-jcrop但我on Rails的新的,它似乎复杂,我不“知道如何使用我的代码合并这个事情。 那我需要做的,不知道怎么其他的事情,就是保持原来的文件后茬作物。
我的文件:
users_controller.rb:
class UsersController < ApplicationController
def index
@users = User.all
end
def show
@user = User.find(params[:id])
end
def new
@user = User.new
end
def create
@user = User.new(user_params)
if @user.save
if params[:user][:avatar].present?
render :crop
else
redirect_to @user, notice: "Successfully created user."
end
else
render :new
end
end
def edit
@user = User.find(params[:id])
end
def update
@user = User.find(params[:id])
if @user.update_attributes(user_params)
if params[:user][:avatar].present?
render :crop
else
redirect_to @user, notice: "Successfully updated user."
end
else
render :new
end
end
def destroy
@user = User.find(params[:id])
@user.destroy
redirect_to users_url, notice: "Successfully destroyed user."
end
private
def user_params
params.require(:user).permit(:name, :avatar, :crop_x, :crop_y, :crop_w, :crop_h)
end
end
user.rb
class User < ActiveRecord::Base
mount_uploader :avatar, AvatarUploader
after_update :crop_avatar
attr_accessor :crop_x, :crop_y, :crop_w, :crop_h
def crop_avatar
if crop_x.present?
mini_magick = MiniMagick::Image.open(self.avatar.large.path)
crop_params = "#{crop_w}x#{crop_h}+#{crop_x}+#{crop_y}"
mini_magick.crop(crop_params)
mini_magick.write(self.avatar.path)
avatar.recreate_versions!
end
end
end
avatar_uploader.rb:
class AvatarUploader < CarrierWave::Uploader::Base
include CarrierWave::MiniMagick
storage :file
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
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 "#{model.crop_x}x#{model.crop_y}+#{model.crop_w}+#{model.crop_h}"
img
end
end
end
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'
我上投#182轨基于它。 谢谢。