jquery - RoR : jQuery jCrop, 在预览中无法正确裁剪

Question

我在预览中没有得到正确的裁剪，而且，当我保存裁剪图像时，它并没有真正裁剪图像。

当我尝试拖动裁剪窗口时，它会拉伸(stretch)我的图像，并且我的图像不会停留在一处，它会四处移动

这表明预览图像超出了预览窗口。

这表明我的预览图像正在被拉伸(stretch)。

这是我的 user.js.coffee

jQuery(document).ready ($) ->
  jQuery ->
    new PicCropper()

  class PicCropper
    constructor: ->
      $('#cropbox').Jcrop
        aspectRatio: 1
        setSelect: [0, 0, 500, 500]
        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'

这是我的 users_controller

  def update
    if params[:user][:password].blank?
      [:password,:password_confirmation,:current_password].collect{|p| params[:user].delete(p) }
    else
      @user.errors[:base] << "The password you entered is incorrect" unless @user.valid_password?(params[:user][:current_password])
    end

    @user = User.find(params[:id])
    if @user.update_attributes(params[:user])
      if params[:user][:profile_pic].present?
        render :crop
      else
        redirect_to @user, notice: "Successfully updated image."
      end
    else
      render :action => 'edit'
    end

任何人都可以查明为什么我会得到这个吗？

谢谢

Answer 1

问题是因为我需要在 CSS 样式中进行硬编码并将预览图像的宽度和高度设置为 0