image_cropper

image_cropper

Combine upload images with a cropper

Features

• Previews image before upload
• Considers carrierwave cache (when form return with error)
• Responsive
• Real crop (generate 2 files, and in case of circle frame, effectively crop an circular image)

Dependencies

• Gem jquery-rails
• Gem CarrierWave to upload files
• Gem RMagick to crop images
• Gem font-awesome-rails to show pretty icons

---

Rubygems

https://rubygems.org/gems/image_cropper (To update the gem and upload a new version, see a this document bottom)

Getting Started

Installation

Add this line to your application's Gemfile:

gem 'image_cropper'

And then execute:

$ bundle install

Finally run:

rails g image_cropper:install

This one generate the default null image 'app/assets/images/image_cropper/default.png' used to show when the image window don't have one (later you can modify if you need)

Create/Update the Uploader

Start off by generating an uploader or modify if you already get one:

Using "Image" as an example, you should have a file

app/uploaders/image_uploader.rb

Add these lines and leave it like this:

class ImageUploader < CarrierWave::Uploader::Base
  
  #If you need to define another/s columns, just define in class 
  #this methods and puts in th array, but it's no necesary and take :file as default
  #def self.mount_uploader_columns
  #  [:file]
  #end
  
  #Include the functionality of the gem
  include ImageCropper::Uploader

  storage :file

  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end
end

Update Model

As an example I use a dummy model User:

$ rails g scaffold User name

Then integrate with Carrierwave generating the column that it need (In the example of carrierwave use avatar as column, in this one I choose file as column because is more pretty :P)

Now, add fields to the model you want to mount the uploader by executing:

$ rails g image_cropper:migrate User

This generate a file XXXXXXXXXXXXXX_image_cropper_add_fields_to_users.rb

class ImageCropperAddFieldsToUsers < ActiveRecord::Migration
  def change
    #Used to crop file
    add_column :users, :coord_x, :float, default: 0
    add_column :users, :coord_y, :float, default: 0
    add_column :users, :coord_w, :float, default: 0
    add_column :users, :coord_h, :float, default: 0
    add_column :users, :coord_z, :float, default: 1
    add_column :users, :frame, :string, default: 'square' 
  end
end
   

Then execute:

  rake db:migrate

Open your model file and add these line:

class User < ActiveRecord::Base
  include ImageCropper::Model
  mount_uploader :file, ImageUploader
end

Require Assets (Css/Js)

Include the following in your javascript manifest:

//= require jquery
//= require image_cropper

And the following in your stylesheet manifest:

 *= require font-awesome
 *= require image_cropper

(for the moment font-awesome is dependency and you need to require)

Using

Now you're able to use it in forms:

<div style='max-width: 400px;'>
<%= f.image_cropper_field :file %>
</div>

If you need to save remote image, you need to set value in the hidden field and trigger 'change'

$('.image-cropper-file-url').val('https://www.gettyimages.es/gi-resources/images/Embed/new/embed2.jpg').trigger('change');

remember put the property 'multipart' to form when you use image_cropper:

<%= form_with(model: user, local: true, html: {multipart: true}) do |form| %>

And add to strong parameters the fields

params.require(:user).permit(:name, :coord_x, :coord_y, :coord_w, :coord_h, :coord_z, :frame, :file, :file_cache, :remote_file_url)

(Is very important the orden of these params, always leave the :file_cache, and :file to the end)

And in a show view:

<div style='max-width: 400px;'>
    <%= image_tag @user.file.thumb.url, class: 'image-cropper' %>
</div>

You can send some params

• aspect_ratio
• frame
• operation_object
• destroyable
• destroy_class
• destroy_confirm

Params	Type	Default	Options	Description
aspect_ratio	(string)	'4:3'	any combination of 'number:number'	4:4 are perfect square, 4:3 rectangle horizontal, 3:4 rectangle vertical
frame	(string)	'square'	'square' or 'circle'	frame of image, if you want a circle o square frame
operation_object	(object)	self	any object	maybe the object where mount the uploader it's not the one you want to erase
destroyable	(boolean)	false	true or false	If you want a button to remove object with nested_attributes
destroy_class	(string)	'.image-cropper-container'	a class or id of containter	Is the container that disapear when you click remove
destroy_confirm	(string)	'Are you sure?'	any message you want	message to display to confirm to remove the image

---

Features to the future

• Make test
• Problem with gif when crop area, not resize - SOLVED
• Problem with jpg, jpeg, circular crop - NOT ALOW, JPG AND JPEG CAN'T CIRCULAR CROP

Thanks!

RubyGems

Esta gema está publicada en RubyGems bajo el user [e-mail]

Actualización

Una vez que hay una nueva versión, modificar lib/image_cropper/version.rb

Y luego ejecutar:

gem build image_cropper.gemspec
gem push image_cropper-[VERSION].gem