Carrierwave 和 Jcrop 和 Devise，Jcrop 不裁剪

Posted 2023-02-25

【中文标题】Carrierwave 和 Jcrop 和 Devise，Jcrop 不裁剪

【英文标题】：Carrierwave and Jcrop and Devise, Jcrop is not cropping

【发布时间】：2014-05-14 02:39:05

【问题描述】：

我使用 Devise 进行身份验证，使用 Carrierwave + Jcrop (gem 'jcrop-rails-v2') 让用户裁剪他们的头像。我正在关注这个 railscasts ，在完成 railscasts 之后，出于某种原因，它没有裁剪。我不确定它是否与Devise 或Jcrop 有关

请在下面查看我拍摄的代码和屏幕截图。正如您在屏幕截图中看到的那样，单击“裁剪”后，图像应该与“预览”相同，但它只是实际图像的较小版本。

crop.html.erb

<h1>Crop Avatar</h1>

<%= image_tag @user.image_url(:large), id: "cropbox" %>

<h4>Preview</h4>
<div style="width:100px; height:100px; overflow:hidden">
  <%= image_tag @user.image.url(:large), :id => "preview" %>
</div>

<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html =>  :method => :put ) do |f| %>
  <% %w[x y w h].each do |attribute| %>
    <%= f.hidden_field "crop_#attribute" %>
  <% end %>
  <div>
    <%= f.submit "Crop" %>
  </div>
<% end %>

users.js.coffee

jQuery ->
  new ImageCropper()

class ImageCropper
  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'

registrations_controller.erb

class RegistrationsController < Devise::RegistrationsController

    def update
    account_update_params = devise_parameter_sanitizer.sanitize(:account_update)
    @user = User.find(current_user.id)

        successfully_updated = if account_update_params[:password].blank?
           params[:user].delete(:current_password)
           @user.update_without_password(devise_parameter_sanitizer.sanitize(:account_update))
         else
           @user.update_with_password(devise_parameter_sanitizer.sanitize(:account_update))
         end

         if successfully_updated
            set_flash_message :notice, :updated
            sign_in @user, :bypass => true
            if params[:user][:image].present?
              render "crop"
            else
              redirect_to "/users/3"
            end
         else
            render "edit"
         end
  end


protected



end

image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base

  include CarrierWave::RMagick

  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!(x, y, w, h)
      end
    end
  end


end

【问题讨论】：

你也可以附上上传者吗，也不确定你是否知道[account_update]（github.com/plataformatec/devise/blob/…）上的哪些参数被清理了，我很惊讶你的图像是如何被保存的

好的，请检查更新后的问题。这是我的 [account_update]devise_parameter_sanitizer.for(:account_update) |u| u.permit(:username, :image )

好酷，但是你在哪里允许crop_x,crop_y,crop_h,crop_w 也附上你的参数

在我的用户模型 (user.rb) 中，我写了attr_accessor :crop_x, :crop_y, :crop_w, :crop_h，这有点奇怪，因为我使用的是 Rails 4。

是的，但是由于您是批量分配的，因为我没有看到您明确分配 crox_[x|y|h|w] 的任何地方，您还必须从参数中清理那些，因此我要求您在问题中附上您的 params /跨度>

【参考方案1】：

def configure_account_update_params
    devise_parameter_sanitizer.for(:account_update) << [:crop_x, :crop_y, :crop_w..

我做到了，它有效！