Crop and Rotate images in Rails 3+
JavaScript PHP Ruby
Latest commit 3dd97ab Jun 4, 2012 @kristianmandrup add jqzoom
Failed to load latest commit information.
lib initial Jun 3, 2012
spec add jqzoom Jun 4, 2012
vendor/assets add jqzoom Jun 3, 2012
.document Initial commit to crop_rotate. Jun 3, 2012
.gitignore initial Jun 3, 2012
.rspec Initial commit to crop_rotate. Jun 3, 2012
Gemfile initial Jun 3, 2012
Gemfile.lock initial version Jun 3, 2012
LICENSE.txt Initial commit to crop_rotate. Jun 3, 2012 add jqzoom Jun 3, 2012
Rakefile initial version Jun 3, 2012
VERSION initial version Jun 3, 2012

Crop and Rotate

Crop and Rotate images in Rils 3+


In Rails Gemfile

gem 'crop_rotate'


In application.css manifest

 * require 'jquery.Jcrop.min'
 * require 'jquery.jqzoom'

In application.js manifest

//= require 'jquery.color'
//= require 'jquery.Jcrop.min'
//= require 'jquery.Rotate'
//= require 'jquery.jqzoom-core'

Then use as described in respective manuals/documentation.

Jquery Rotate

Jquery Rotate manual



jQuery ->
    zoomType: 'standard',
    preloadImages: false

## JCrop

[Jcrop manual](

[jCrop Rails example](

jQuery ->
  class AvatarCropper
    constructor: -> 
        aspectRatio: 1 
        setSelect: [0, 0, 500, 500] 
        onSelect: @update 
        onChange: @update

    update: (coords) => 

    updatePreview: (coords) => 
        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'

  new AvatarCropper()
class UserController < ApplicationController
  def update
      @user = User.find(params[:id])
      if @user.update_attributes(params[:user])
        if params[:user][:avatar].present?
          render :crop
          redirect_to @user, notice: "Successfully updated user."
        render :new

  def crop
    @user = User.find(params[:id])
    render view: "crop"
  Crop Avatar
= image_tag @user.avatar_url(:pre_crop), id: "cropbox"

= image_tag @user.avatar.url(:pre_crop), id: "preview-box"

= form_for @user do |f|
    - %w[x y w h].each do |attribute|
      = f.hidden_field "crop_#{attribute}"
    = f.submit "Crop"
#cropbox {
  /* background: url(; */
  width: 400px;
  height: 400px;
#preview-box {
  width: 100px;
  height: 100px;
  overflow: hidden;


Please keep me posted on new updates to each library ;)

Contributing to crop_rotate

  • Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.
  • Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it.
  • Fork the project.
  • Start a feature/bugfix branch.
  • Commit and push until you are happy with your contribution.
  • Make sure to add tests for it. This is important so I don't break it in a future version unintentionally.
  • Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.


Copyright (c) 2012 Kristian Mandrup. See LICENSE.txt for further details.