Contents

<%= content_for :head do %>
  <%= stylesheet_link_tag    "jquery.Jcrop" %>
  <%= javascript_include_tag "jquery.Jcrop.min" %>
  <script type="text/javascript" charset="utf-8">
  $(function() {
    $('#cropbox').Jcrop({
      onChange: update_crop,
      onSelect: update_crop,
      setSelect: [0, 0, 500, 500],
      aspectRatio: 1
    });
  });

  function update_crop(coords) {
    var rx = 100/coords.w;
    var ry = 100/coords.h;
    var lw = $('#cropbox').width();
    var lh = $('#cropbox').height();
    
    var ratio = <%= @user.avatar_geometry[:width] %> / lw;
    
    $('#preview').css({
      width:      Math.round(rx * lw) + 'px',
      height:     Math.round(ry * lh) + 'px',
      marginLeft: '-' + Math.round(rx * coords.x) + 'px',
      marginTop:  '-' + Math.round(ry * coords.y) + 'px'
    });
    
    $("#crop_x").val(Math.round(coords.x * ratio));
    $("#crop_y").val(Math.round(coords.y * ratio));
    $("#crop_w").val(Math.round(coords.w * ratio));
    $("#crop_h").val(Math.round(coords.h * ratio));
  }
  </script>
<% end %>

<div id="avatar_box">
  <%= image_tag @user.avatar.url, id: "cropbox" %>
</div>

<div id="avatar_preview" style="width:100px; height:100px; overflow:hidden">
  <%= image_tag @user.avatar.url, id: "preview" %>
</div>

<%= form_for @user, url: avatar_path do |f| %>
  <% for attribute in [:crop_x, :crop_y, :crop_w, :crop_h] %>
    <%= f.hidden_field attribute, :id => attribute %>
  <% end %>
  <p><%= f.submit "Crop" %></p>
<% end %>

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
buddies_avatar-0.0.2	app/views/avatars/crop.html.erb
buddies_avatar-0.0.1	app/views/avatars/crop.html.erb