Overview¶ ↑

jcropper wraps jcrop 0.98, deepliquid.com/content/Jcrop.html, an in-browser cropping tool, to allow users to crop attached images. It currently only works with paperclip.

(note, there is also another jcrop plugin, github.com/jschwindt/rjcrop)

Installation¶ ↑

Install plugin or gem

script/plugin install git://github.com/syfo/jcropper.git

  or

gem install jcropper
in environment.rb: config.gem 'jcropper'
in config/preinitializer.rb or #{RAILS_ROOT}/Rakefile

  begin
   require 'jcropper/tasks'
  rescue LoadError; end

Include the jcropper processor in the paperclip style.

class User < ActiveRecord::Base
  has_attached_file :avatar, :styles => { :thumb => "100x100>", :processors => "jcropper" }
  ...
end

Tell jcropper to crop the paperclip attachment

jcrop :avatar, :thumb

Generate and install your migration

script/generate jcropper user avatar thumb
rake db:migrate

Install js/css/images for jcropper

rake jcropper:install

Add the headers to your view or layout (jquery required)

<%= javascript_include_tag 'jquery.Jcrop.min.js' %>
<%= javascript_include_tag 'jcropper.js' %>
<%= stylesheet_link_tag 'jquery.Jcrop.css' %>

Add the helpers to your view:

<%= croppable_image @user, :avatar, :thumb -%>
<%= croppable_image_preview @user, :avatar, :thumb -%>

Optional syntax, with :user being the name for the form submit.
<%= croppable_image [@site.user, :user], :avatar, :thumb -%>
<%= croppable_image_preview [@site.user, :user], :avatar, :thumb -%>

Optional syntax, effects same as first option
<%= croppable_image :user, :avatar, :thumb -%>
<%= croppable_image_preview :user, :avatar, :thumb -%>

Helper Options:

:css_prefix => 'jcrop',
:width => 100, :height => 100,
:js_object => 'croppedImage',
:aspect_ratio => false

Notes¶ ↑

• jcropper currently only supports ONE cropped style per attachment, one cropped attachment per model

• croppedImage.jcrop gets you the jcrop api object (see jcrop docs)

• in helpers, :aspect_ratio defaults to the aspect ratio of the original image

• in helpers, width and height default to the target geometry for the style. if you override one of width/height you must override both

• you’ll have to read the jcropper.js source for function docs there

• should be working on ruby 1.8/1.9 and rails 2.3/3, although it has not been thoroughly tested

• jcrop :avatar, :thumb, :maintain_aspect_ratio => true will lock aspect_ratio to the target geometry and default to a north/center max crop

• test/code ratio is 0

Copyright © 2010 Symbolforce, LLC., released under the MIT license