jCrop 不更新文本字段，Rails 4 应用程序

Posted 2023-02-25

【中文标题】jCrop 不更新文本字段，Rails 4 应用程序

【英文标题】：jCrop not updating text fields, Rails 4 app

【发布时间】：2015-07-26 11:51:23

【问题描述】：

我有一个应用程序，其中有两个不同的 jCrops 工作（用户图像和组图像）。用户一工作正常，组一与它完全一样，除了 div 名称的适当更改。 jCrop 不会更新文本字段，因此无法正确裁剪图像。预览确实会正确更新，因此咖啡脚本正在加载，问题出在更新 coods 上。我也没有在开发工具中遇到任何错误。

裁剪页面

 <div class="col-md-7">
        <%= image_tag @group.image_url, id: "cropbox" %>
    </div>
    <div class="col-md-5">
        <h4>Preview</h4>
    <div class="jcrop" style="width:100px; height:100px; overflow:hidden; border-radius: 50px;">
        <%= image_tag @group.image_url, :id => "preview" %>
        </div>
    <%= form_for @group do |f| %>
        <% %w[x y w h].each do |attribute| %>
            <%= f.text_field "crop_#attribute" %>
        <% end %>
        <div class="actions m-t-md">
        <%= f.button "Crop Image", class: "btn btn-primary mt10", data: disable_with: "<i class='fa fa-fw fa-spinner fa-spin'></i> Cropping" %>
        </div>
    <% end %>
</div>

Groups.coffee

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

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

  update: (coords) =>
    $('#group_crop_x').val(coords.x)
    $('#group_crop_y').val(coords.y)
    $('#group_crop_w').val(coords.w)
    $('#group_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'

【参考方案1】：

想通了。我的问题的第二句话中有一个线索。我有两个同名的方法。显然这是行不通的。更改方法名称和 div 名称，解决了所有问题。