Rails的carrierwave + jcrop +引导(Rails carrierwave +

2019-10-19 05:21发布

我使用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轨基于它。 谢谢。

文章来源: Rails carrierwave + jcrop + bootstrap