RailsCast 182（改訂版）：Jcropが動作しない

Question

Ryan BatesがRailsCast Episode 182（改訂版）で使用しているのと全く同じ方法でJcropでCarrierwaveを使用しようとしていますが、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桁）や別のエディタで目立つようになりましたが、私はその点を詳しく説明しません。コーヒースクリプトで空白を注意深く見なければならないと言うだけで十分です。おそらく、より良いコンパイラの警告は、あまりにも一般的な間違いのために役立つだろう。あなたのインデントを修正して、あなたはすべての良いです：

デモ：http://jsfiddle.net/ambiguous/jTvV3/

Answer 2

あなたがあなたのCSSの

img.jcrop {max-width: none}

を追加する必要があり、ブートストラップを使用している場合は...何とかブートストラップ{IMGをオーバーライドしています最大幅：100％}詳細チェックアウトのための

https://github.com/twbs/bootstrap/issues/1649

Answer 3

よりもむしろjs.coffeeを使用して、私は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