4

Ryan Bates が RailsCasts Episode 182 (revised) で使用するのとまったく同じ方法で Carrierwave を Jcrop で使用しようとしていますが、Jcrop を動作させることができず、その理由がわかりません。

に到達するとcrop.html.erb、元の画像とプレビューが期待どおりに表示されますが、元の画像で何も選択できず、プレビューが応答しません。

少し遊んでみましたが、()後ろを追加する.Jcropと、元の画像で少なくとも何かを選択できますが、プレビューはまだ応答せず、選択した領域もアスペクト比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 %>
4

3 に答える 3

4

これはあなたが望むものではありません:

$('#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/

于 2012-05-03T19:58:26.353 に答える
1

ブートストラップを使用している場合は、追加する必要があります

img.jcrop {max-width: none}

あなたのcssのために..どういうわけかブートストラップはimg {max-width:100%}をオーバーライドしています

詳細については、https://github.com/twbs/bootstrap/issues/1649をご覧ください。

于 2014-02-08T15:34:22.270 に答える