Ruby on Rails(6+) Uploading and Cropping images with Shrine, and Cropper.js

I was going around the internet to find a good guide to integrate shrine, and cropper.js to upload and crop the images. All those hours went into vain. So I have decided to give a quick overview on how to upload images with shrine, and crop them using Cropper.js.

FYI, this is a tutorial for Rails 6. You can read more about cropper.js, and shrine from here:

shrinerb/shrine

https://fengyuanchen.github.io/cropperjs/

Step # 1 Setup Shrine

Quick note: You must have MiniMagick installed on your system.

We will quickly add shrine to our gem file, and setup the initializer (shrine.rb)

# Gemfile
gem "shrine", "~> 3.0"

Now let’s setup our initializer

# config/initializers/shrine.rb
require 'shrine'
require 'shrine/storage/file_system'
require 'image_processing/mini_magick'
Shrine.storages = {
cache: Shrine::Storage::FileSystem.new('public', prefix: 'uploads/cache'),
store: Shrine::Storage::FileSystem.new('public', prefix: 'uploads/store')
}
Shrine.plugin :activerecord
Shrine.plugin :cached_attachment_data
Shrine.plugin :restore_cached_data
Shrine.plugin :validation_helpers
Shrine.plugin :derivatives, versions_compatibility: true

Step # 2 Add column in the database

For this example, we are taking User model as an example. To add image column we will run a migration.

rails generate migration add_image_data_to_users image_data:text

This will create a new column in our User’s table.

Step # 3 Uploader, and register it with your main Model(User).

We will create a standard uploader which will inherit from Shrine’s class. This will do half of the heavy listing.

Create an uploader class (which you can put in app/uploaders) and register the attachment on your model

# app/uploaders
class ImageUploader < Shrine
include ImageProcessing::MiniMagick
Attacher.validate do
# You can add your image validations here ..
end
Attacher.derivatives do |original|
magick = ImageProcessing::MiniMagick.source(original)
result = {}
unless $logo_crop_x.blank?
x = $logo_crop_x.to_f
y = $logo_crop_y.to_f
w = $logo_crop_w.to_f
h = $logo_crop_h.to_f
magick = magick.crop(x,y,w,h)
end
result[:thumb] = magick.resize_to_limit!(100, 100)
result[:medium] = magick.resize_to_limit!(300, 300)
result
end
class Attacher
def promote(*)
create_derivatives
super
end
end
end

logo_crop_x, logo_crop_y, logo_crop_h, and logo_crop_w are the coordinates of the images. We will use these to crop the image. Later on we will be providing these coordinates to our uploader.

Now, let’s register the uploader with our User model.

# app/models/user.rb
class User < ApplicationRecord
  attr_accessor :logo_crop_x, 
                :logo_crop_y, :logo_crop_h,:logo_crop_w
include ImageUploader::Attachment(:image)
end

So far so good!

Step # 4 Update our controller

Let’s update our controller, and permit the parameters that we are going to use.

class UsersController < ApplicationController
before_action :sanitize_fields_params, only: [:update]
def update
respond_to do |format|
current_user.update(user_params)
format.html { redirect_to root_path }
end
end
private
def user_params
list_params_allowed = [:image,:logo_crop_x, :logo_crop_y,     :logo_crop_h, :logo_crop_w]
params.require(:user).permit(list_params_allowed)
end
def sanitize_fields_params
$logo_crop_x = params[:user][:logo_crop_x]
$logo_crop_y = params[:user][:logo_crop_y]
$logo_crop_w = params[:user][:logo_crop_w]
$logo_crop_h = params[:user][:logo_crop_h]
end
end

Phase II (Cropper.js)

Now the fun part starts. We will add cropper in our application and integrate it with our views.

Step # 5 Adding Cropper.js

We will install cropper.js with our package manager, and add it to our application. Create a file called custom_cropper.js in app/javascript/custom. All our configurations related cropper will go in this file.

yarn install cropperjs
# app/javascript/packs/application.js
  
import 'custom/cp'
#app/assets/stylesheets/application.scss
 *= require cropperjs/dist/cropper.css

Let’s customize our cropper. Go to custom_cropper.js file, and paste the code there:

Note: We will be opening a new modal to crop the image.

function crop_image_load(data) {
data = data.detail;
var $crop_x = $("input#logo_crop_x")[0],
$crop_y = $("input#logo_crop_y")[0],
$crop_w = $("input#logo_crop_w")[0],
$crop_h = $("input#logo_crop_h")[0];
$crop_x.value = data.x;
$crop_y.value = data.y;
$crop_h.value = data.height;
$crop_w.value = data.width;
}
function getRoundedCanvas(sourceCanvas) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var width = sourceCanvas.width;
var height = sourceCanvas.height;
canvas.width = width;
canvas.height = height;
context.imageSmoothingEnabled = true;
context.drawImage(sourceCanvas, 0, 0, width, height);
context.globalCompositeOperation = 'destination-in';
context.beginPath();
context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
context.fill();
return canvas;
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
var $crop_x = $("input#logo_crop_x"),
$crop_y = $("input#logo_crop_y"),
$crop_w = $("input#logo_crop_w"),
$crop_h = $("input#logo_crop_h");
$crop_x.val('');
$crop_y.val('');
$crop_h.val('');
$crop_w.val('');
var $image = $('#image')[0];
var $button = $('#button');
var croppable = false;
let x;
$('#upload-modal').on('shown.bs.modal', function () {
x = new Cropper($image, {
aspectRatio: 1,
viewMode: 1,
ready: function () {
croppable = true;
},
crop: function (event) {
crop_image_load(event)
}
});
}).on('hidden.bs.modal', function () {
x.destroy();
});
$button.on('click', function () {
var croppedCanvas;
var roundedCanvas;
croppedCanvas = x.getCroppedCanvas();
roundedCanvas = getRoundedCanvas(croppedCanvas);
$('#avatar')[0].src = roundedCanvas.toDataURL();
$('#avatar')[0].setAttribute("height", "100");
$('#avatar')[0].setAttribute("width", "100");
});
$("#image_to_upload").change(function () {
$('#upload-modal').modal('show');
readURL(this);
});

In a nutshell, this file opens up a new modal whenever user selects a new image.

crop_image_load — — This function will be called whenever we resize our image. It will update the coordinates that we will need to crop our image in the Uploader that we created earlier.

getRoundedCanvas — — To convert the cropped image into nice round shape. Just a fancy touch.

readURL — — Moves the context image to latest selected one.

(FINAL) Step # 6 Update our form html file.

This is the last major step. We will simply add the form fields, modal to view and store our image.

# app/views/users/_form.html.erb
<%= form_with model: user, url: user_path do |f| %>
<div>
<div class="row align-items-end profile-image" data-controller="thumb">
<div class='col-md-6'>
<div class="form-group">
<%= f.hidden_field :image, value: f.object.cached_image_data %>
<% if !f.object.image.present? %>
<span class="fa fa-file fa-6x place-holer-image"></span>
<%= image_tag '', id: :avatar %>
<%else%>
<%= image_tag f.object.image_url(:thumb), id: :avatar %>
<% end %>
</div>
</div>
<div class='col-md-6'>
<div class="row">
<div class="col-md-12">
<%= f.file_field :image, id: :image_to_upload %>
<%= f.label :image, class: 'upload' do %>
<% end %>
</div>
<% %w[x y w h].each do |attribute| %>
<%= f.hidden_field "logo_crop_#{attribute}", id:"logo_crop_#{attribute}" %>
<% end %>
</div>
</div>
</div>
<% end % >

# modal
<div class="modal fade" id="upload-modal" aria-labelledby="modalLabel" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Crop Image</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div>
<img id="image" width="100%" src="" alt="Logo">
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-primary" id="button" value="Crop" data-dismiss="modal"></button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Final Look

Look out for

1. If you are getting errors on your browser’s console, it probably means you have some problems related to turbolinks. Make sure they are configured properly.

If you have any questions, feel free to ask in the comments below. Or you can connect with me through my website.

Happy developing!

Hamza Awais

You get in touch with me:

email: hamzawais54@gmail.com | Phone: +923244105651 | web: meet-hamza.com | linkedin: https://www.linkedin.com/in/hamza-awais-1908/

Hamza - Full Stack Developer