RailsCast 182（修订）：Jcrop 不工作

Posted 2023-03-03

【中文标题】RailsCast 182（修订）：Jcrop 不工作

【英文标题】：RailsCast 182 (revised): Jcrop not working

【发布时间】：2012-05-13 08:37:49

【问题描述】：

我正在尝试将 Carrierwave 与 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 %>

【参考方案1】：

而不是使用 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

【参考方案2】：

如果您使用的是引导程序，则必须添加

img.jcrop max-width: none

对于您的 css.. 不知何故，引导程序覆盖了 img max-width:100%

欲了解更多信息，请查看https://github.com/twbs/bootstrap/issues/1649

【参考方案3】：

这不是你想要的：

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

【讨论】：

对不起，我应该更清楚地说明这一点，但 .Jcrop 的方式是我最初使用的方式，因为 Ryan Bates 就是这样做的，但那根本不起作用.它只显示图片，但我无法选择任何内容。与组周围的括号相同。

是的，在我的 application.js 中有：

//= 需要 jquery //= 需要 jquery_ujs //= 需要 jquery.Jcrop //= 需要_tree .

我认为添加括号时我至少可以选择一个区域这一事实表明这不是资产管道的问题。

@F***Jahr：欢迎来到重要空白和编译器的世界，这些编译器不够聪明，无法抱怨明显的错误，看看我的更新。