Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Crop and Rotate images in Rails 3+
tree: 3dd97ab73f
Failed to load latest commit information.
lib initial
spec add jqzoom
vendor/assets add jqzoom
.document Initial commit to crop_rotate.
.gitignore initial
.rspec Initial commit to crop_rotate.
Gemfile initial
Gemfile.lock initial version
LICENSE.txt Initial commit to crop_rotate.
README.md add jqzoom
Rakefile initial version
VERSION initial version

README.md

Crop and Rotate

Crop and Rotate images in Rils 3+

Install

In Rails Gemfile

gem 'crop_rotate'

Usage

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

$("#img").rotate(90);

JqZoom

jQuery ->
  $('.jqzoom').jqzoom
    zoomType: 'standard',
    lens:true
    preloadImages: false
    alwaysOn:false
``

## JCrop

[Jcrop manual](http://deepliquid.com/content/Jcrop_Manual.html)

[jCrop Rails example](http://jsfiddle.net/ambiguous/jTvV3/)

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

  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
        else
          redirect_to @user, notice: "Successfully updated user."
        end
      else
        render :new
      end
    end

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

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

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

Updates

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

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

Something went wrong with that request. Please try again.