Croppable

Easily crop images in Ruby on Rails with Cropper.js integration.

Installation

Add this line to your application's Gemfile:

gem "croppable"

bin/rails croppable:install

The asset_host config needs to be set on every environment

config.asset_host = "http://localhost:3000"

Install cropperjs JavaScript dependency

yarn add cropperjs@next
// or
bin/importmap pin cropperjs@next

If you're using importmap add croppable pin to importmap.rb

pin "croppable"

Import the croppable JavaScript module in your application entrypoint

import "croppable"

Import croppable styles in your base stylesheet

*= require croppable

Install croppable migrations

bin/rails croppable:install:migrations

brew install vips

Add has_croppable into your model

has_croppable :logo, width: 300, height: 300, scale: 2

width and height are in pixels and required.

scale: 2 will generate an image twice as big. Useful for retina display monitors. It defaults to 1.

Add croppable_field to your form

form.croppable_field :logo

Update controller strong paramenters to permit each croppable parameter

params.require(:model).permit(..., :logo)

Display cropped image in your view

image_tag model.logo if model.logo.present?

Original image can be accessed in <croppable>_original

model.logo_original

NOTE: Images are cropped in a background job after model gets saved so they might not be immediately available

Run all test

rails test
rails app:test:system

The gem is available as open source under the terms of the MIT License.