Предварительный просмотр jcrop содержит странную ошибку - PullRequest
Новая
       6

Предварительный просмотр jcrop содержит странную ошибку

2 голосов
/ 01 марта 2012

Мне нужна помощь с моим предварительным просмотром jcrop. Я слежу за этим уроком из railscasts # 182, но что-то не так, и я, кажется, могу понять это. Это немного сложно объяснить, но предварительный просмотр кадрирования не работает, и второе изображение появляется внутри маркеров изменения размера кадрирования. Это дополнительное изображение растягивается и искажается с изменением размера обрезки. Поскольку это немного сбивает с толку, и мое приложение все еще находится на моей локальной машине, я включил видео-демонстрацию текущей функциональности , а также, как я полагаю, весь соответствующий код ниже.

Я также отправил электронное письмо jcrop, и они предположили, что это может быть вызвано ошибкой в ​​моей области предварительного просмотра. Я полагаю, что это правильно, так как в настоящее время я использую тот, который был предоставлен Рэйн Бэйтсом в "Railscasts". Единственное, что я думал, могут быть проблемы, это "attr_accessible" и "attr_accessor". Я новичок в ruby ​​и rails, поэтому мне сложно понять свои ошибки. Буду признателен за любую помощь, пожалуйста, дайте мне знать, если я могу предоставить дополнительную информацию.

Сначала вот мой avatar_uploader.rb 

class AvatarUploader < CarrierWave::Uploader::Base
  include CarrierWave::RMagick

  storage :file

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  version :large do
    resize_to_limit(600, 600)
  end

  version :thumb do
    process :crop
    resize_to_fill(100, 100)
  end

  version :mini do
    process :crop
    resize_to_fill(48, 48)
  end

  version :nano do
    process :crop
    resize_to_fill(20, 20)
  end

  def crop
    if model.crop_x.present?
      resize_to_limit(600, 600)
      manipulate! do |img|
        x = model.crop_x.to_i
        y = model.crop_y.to_i
        w = model.crop_w.to_i
        h = model.crop_h.to_i
        img.crop!(x, y, w, h)
      end
    end
  end
end

user.rb 

class User < ActiveRecord::Base
  belongs_to :team
  # Define roles
  ROLES = %w[admin conference president tailgater author banned]

  # Include default devise modules. Others available are:
  # :token_authenticatable, :encryptable, :confirmable, :lockable, :timeoutable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable

  # Setup accessible (or protected) attributes for your model
  attr_accessible :email, :password, :password_confirmation, :remember_me, 
                  :role, :avatar, :team_id
  #Include uploader
  mount_uploader :avatar, AvatarUploader
  attr_accessor :crop_x, :crop_y, :crop_w, :crop_h
  after_update :crop_avatar

  def crop_avatar
    avatar.recreate_versions! if crop_x.present?
  end

end

crop.html.erb 

<h1>Crop Avatar</h1>

<%= image_tag @user.avatar_url(:large), id: "cropbox" %>

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

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

users.js.coffee 

jQuery ->
  new AvatarCropper()

class AvatarCropper
  constructor: ->
    $('#cropbox').Jcrop
      aspectRatio: 1
      setSelect: [0, 0, 600, 600]
      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'

1 Ответ

6 голосов
/ 20 марта 2012

У меня была такая же проблема, как и у вас. Это связано с конфликтом с начальной загрузкой CSS. детали и решения можно найти здесь .

...