RailsCast 182（修訂版）：Jcrop不工作

Question

我想用與Carrier一樣的Jcrop，和Ryan Bates在RailsCasts第182集（修訂版）中一樣使用它，但是我不能讓Jcrop工作，而且我可以不知道爲什麼。

當我到達crop.html.erb時，它會按預期顯示原始圖片和預覽，但我無法選擇原始圖片上的任何內容，並且預覽沒有響應。

我玩過一點點，當我在.Jcrop後面添加()時，我至少可以選擇原始圖片上的某些內容，但預覽仍然沒有響應，所選區域也不會保持aspectRatio爲1。我猜想出於某種原因，.Jcrop之後的代碼沒有執行。我不是CoffeeScript專家，所以我需要一些幫助來解決這個問題。

這是我的代碼。非常感謝！

user.js.coffee：

jQuery -> 
    new AvatarCropper() 

class AvatarCropper 
    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.rb：

def update 
     @user = User.find(params[:id]) 
     if @user.update_attributes(params[:user]) 
     if params[:user][:avatar].present? 
      render :crop 
     else 
      redirect_to @user, notice: "Successfully updated user." 
     end 
     else 
     render :new 
     end 
    end 

    def crop 
    @user = User.find(params[:id]) 
    render view: "crop" 
    end 

users/crop.html.erb：

<h1>Crop Avatar</h1> 
<%= image_tag @user.avatar_url(:pre_crop), id: "cropbox" %> 

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

<%= form_for @user do |f| %> 
    <div class="actions"> 
    <% %w[x y w h].each do |attribute| %> 
     <%= f.hidden_field "crop_#{attribute}"%> 
    <% end %> 
    <%= f.submit "Crop" %> 
    </div> 
<% end %> 

Answer 1

這不是你想要的東西：

$('#cropbox').Jcrop -> 
    aspectRatio: 1 
    setSelect: [0, 0, 500, 500] 
    onSelect: @update 
    onChange: @update 

用函數（->）作爲參數調用Jcrop插件，Jcrop不知道如何處理函數。添加圓括號：

$('#cropbox').Jcrop() -> 
    aspectRatio: 1 
    setSelect: [0, 0, 500, 500] 
    onSelect: @update 
    onChange: @update 

並沒有多大幫助;調用插件（.Jcrop()）正常，但隨後試圖調用它的返回值作爲另一個函數，它接受一個函數作爲參數：

$('#cropbox').Jcrop()(-> ...) 

，讓你與種植者玩的，但你可能會得到一個錯誤，除非Jcrop插件返回一個函數;在任何情況下，這不會讓你的選項進入Jcrop插件，所以你的回調將不會被調用，Jcrop不會看到寬高比。

我覺得你只是想刪除->（不包括括號），以便調用Jcrop的插件用選擇對象：

$('#cropbox').Jcrop 
    aspectRatio: 1 
    setSelect: [0, 0, 500, 500] 
    onSelect: @update 
    onChange: @update 

或者你可以做到這樣，如果括號幫助看到分組：

$('#cropbox').Jcrop(
    aspectRatio: 1 
    setSelect: [0, 0, 500, 500] 
    onSelect: @update 
    onChange: @update 
) 

一旦這樣做了，你需要在你的壓痕仔細看，你的AvatarCropper沒有update和updatePreview方法，因爲它們是縮進太遠：

class AvatarCropper 
    constructor: -> 
    $('#cropbox').Jcrop 
    ... 
    update: (coords) => 
    ... 
    updatePreview: (coords) => 

這最終定義了一個像{update: ..., updatePreview: ...}這樣的匿名對象，然後它被扔掉;這個問題在更深入的縮進（比如4個空格）或者一個不同的編輯器中會更加明顯，但我不打算說明這一點，只要說你必須在CoffeeScript中非常小心地注意你的空白;也許更好的編譯器警告對這個常見的錯誤會有幫助。修復您的壓痕和你所有的好：

演示：如果您使用http://jsfiddle.net/ambiguous/jTvV3/

Answer 2

引導你必須添加

img.jcrop {max-width: none}

爲你的CSS ..不知怎麼引導是壓倒IMG {最大寬度：100％}

以獲取更多信息結帳https://github.com/twbs/bootstrap/issues/1649

Answer 3

而不是使用js.coffee，將代碼放在js文件，而我已經把application.js中和工作就像一個魅力

function showCoords(c) { 
$('#user_crop_x').val(c.x); 
$('#user_crop_y').val(c.y); 
$('#user_crop_w').val(c.w); 
$('#user_crop_h').val(c.h); }; 


    jQuery(function($) { 
    $('#target').Jcrop({ 
     onSelect: showCoords, 
     bgColor:  'magenta', 
     bgOpacity: .4, 
     setSelect: [ 0, 0, 600, 600 ], 
     aspectRatio: 1 
    }); 
}); 

please refer the link if error persists