Skip to content

Instantly share code, notes, and snippets.

@toidang92

toidang92/_form.html.erb

Forked from gilcierweb/_form.html.erb
Created December 25, 2017 10:44
Show Gist options
  • Save toidang92/920540915f1acab598bc9187ef5a3dfe to your computer and use it in GitHub Desktop.
Save toidang92/920540915f1acab598bc9187ef5a3dfe to your computer and use it in GitHub Desktop.
Download ZIP
Upload image crop with Ruby and Rails, CarrierWave and Cropper.js
Raw
_form.html.erb
#app/views/businesses/_form.html.erb
<%= form_with(model: business, scope: :business, local: true, :html => {multipart: true}) do |form| %>
<div class="row">
<div class="col-md-12">
<%= form.file_field :logo_image, id: :business_logo_image %>
<%= form.label :logo_image, class: 'upload' do %>
<i class="material-icons">file_upload</i>
<span>Choose image</span>
<% end %>
</div>
<% %w[x y w h].each do |attribute| %>
<%= form.hidden_field "logo_crop_#{attribute}", id:"logo_crop_#{attribute}" %>
<% end %>
</div>
<style>
img {
max-width: 100%;
}
</style>
<!-- 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">Cut logo</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>
<p class="text-center">
<button type="button" class="btn btn-primary rotate" data-method="rotate" data-option="-30">
<i class="fa fa-undo"></i></button>
<button type="button" class="btn btn-primary rotate" data-method="rotate" data-option="30">
<i class="fa fa-repeat"></i></button>
</p>
<div id="result"></div>
<div id="preview"></div>
<div>
<canvas id="canvas">
Your browser does not support the HTML5 canvas element.
</canvas>
</div>
</div>
<div class="modal-footer">
<input type="button" id="btnCrop" value="Crop" />
<input type="button" id="btnRestore" value="Restore" />
<input type="button" class="btn btn-primary" id="button" value="Cut" data-dismiss="modal"></button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<%= form.submit t('form.submit'), class: 'btn btn-primary' %>
<% end %>
Raw
business.rb
#app/models/business.rb
class Business < ApplicationRecord
mount_uploader :logo_image, LogoImageUploader
end
Raw
businesses_controller.rb
#app/controllers/businesses_controller.rb
class BusinessesController < ApplicationController
before_action :set_business, only: [:show, :edit, :update, :destroy]
before_action :sanitize_fields_params, only: [:create, :update]
...
private
def sanitize_fields_params
$logo_crop_x = 0
$logo_crop_y = 0
$logo_crop_w = 0
$logo_crop_h = 0
$logo_crop_x = params[:business][:logo_crop_x]
$logo_crop_y = params[:business][:logo_crop_y]
$logo_crop_w = params[:business][:logo_crop_w]
$logo_crop_h = params[:business][:logo_crop_h]
end
def business_params
params.require(:business).permit( :name, :logo_image, :logo_crop_x, :logo_crop_y, :logo_crop_w, :logo_crop_h)
end
end
Raw
cropper_custom.js
// #app/assets/javascripts/cropper_custom.js
// https://fengyuanchen.github.io/cropperjs/
$(function () {
function crop_image_load(data) {
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('');
$crop_x.val(accounting.toFixed(data.x, 6));
$crop_y.val(accounting.toFixed(data.y, 6));
$crop_h.val(accounting.toFixed(data.height, 6));
$crop_w.val(accounting.toFixed(data.width, 6));
// $crop_x.val(Math.round(data.x));
// $crop_y.val(Math.round(data.y));
// $crop_h.val(Math.round(data.height));
// $crop_w.val(Math.round(data.width));
}
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');
var $button = $('#button');
var $result = $('#result');
var croppable = false;
var cropBoxData;
var canvasData;
var img = new Image();
var img_tag = $('#business_logo_image').parent().find("#preview_avatar").children("img");
$('#upload-modal').on('shown.bs.modal', function () {
$image.cropper({
preview: '#preview',
viewMode: 1,
dragMode: 'move',
aspectRatio: 16 / 9,
autoCrop: true,
autoCropArea: 0.65,
restore: false,
guides: false,
highlight: false,
cropBoxMovable: false,
cropBoxResizable: false,
scalable: false,
zoomable: false,
rotatable: false,
getData: true,
checkCrossOrigin: true,
modal: true,
center: true,
// allowMove : true,
// allowResize : true,
// allowSelect : true,
// minSelect : [0, 0],
// outlineOpacity : 0.5,
// overlayOpacity : 0.5,
// selectionPosition : [0, 0],
// selectionWidth : 0,
// selectionHeight : 0,
ready: function () {
$image.cropper('setCanvasData', canvasData);
$image.cropper('setCropBoxData', cropBoxData);
},
crop: function (event) {
crop_image_load(event)
console.log(event.x);
console.log(event.y);
console.log(event.width);
console.log(event.height);
console.log(event.rotate);
console.log(event.scaleX);
console.log(event.scaleY);
}
});
}).on('hidden.bs.modal', function () {
cropBoxData = $image.cropper('getCropBoxData');
canvasData = $image.cropper('getCanvasData');
img.src = img_tag;
// cropImage();
$image.cropper('destroy');
});
$button.on('click', function () {
var croppedCanvas;
var roundedCanvas;
if (!croppable) {
return;
}
// Crop
croppedCanvas = $image.cropper('getCroppedCanvas');
// Round
roundedCanvas = getRoundedCanvas(croppedCanvas);
//console.log('<img src="' + roundedCanvas.toDataURL() + '">')
// Show
$result.html('<img src="' + roundedCanvas.toDataURL() + '">');
});
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]);
}
}
$("#business_logo_image").change(function () {
// console.log(this)
$('#upload-modal').modal('show');
readURL(this);
var canvas = $("#canvas"),
context = canvas.get(0).getContext("2d"),
$result = $('#result');
if (this.files && this.files[0]) {
if ( this.files[0].type.match(/^image\//) ) {
var reader = new FileReader();
reader.onload = function(evt) {
var img = new Image();
img.onload = function() {
context.canvas.height = img.height;
context.canvas.width = img.width;
context.drawImage(img, 0, 0);
var cropper = canvas.cropper({
aspectRatio: 16 / 9
});
$('#btnCrop').click(function() {
console.log(evt)
crop_image_load(evt)
// Get a string base 64 data url
var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png");
$result.append( $('<img>').attr('src', croppedImageDataURL) );
});
$('#btnRestore').click(function() {
canvas.cropper('reset');
$result.empty();
});
};
img.src = evt.target.result;
};
reader.readAsDataURL(this.files[0]);
}
else {
alert("Invalid file type! Please select an image file.");
}
}
else {
alert('No file(s) selected.');
}
});
var canvas = $("#canvas"),
context = canvas.get(0).getContext("2d"),
$result = $('#result');
$('#fileInput').on( 'change', function(){
if (this.files && this.files[0]) {
if ( this.files[0].type.match(/^image\//) ) {
var reader = new FileReader();
reader.onload = function(evt) {
var img = new Image();
img.onload = function() {
context.canvas.height = img.height;
context.canvas.width = img.width;
context.drawImage(img, 0, 0);
var cropper = canvas.cropper({
aspectRatio: 16 / 9
});
$('#btnCrop').click(function() {
// Get a string base 64 data url
var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png");
$result.append( $('<img>').attr('src', croppedImageDataURL) );
});
$('#btnRestore').click(function() {
canvas.cropper('reset');
$result.empty();
});
};
img.src = evt.target.result;
};
reader.readAsDataURL(this.files[0]);
}
else {
alert("Invalid file type! Please select an image file.");
}
}
else {
alert('No file(s) selected.');
}
});
});
Raw
logo_image_uploader.rb
#app/uploaders/logo_image_uploader.rb
class LogoImageUploader < CarrierWave::Uploader::Base
include CarrierWave::MiniMagick
storage :file
def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end
# process resize_to_fit: [800, 800]
# process :crop_image
version :large do
process :crop_image
process resize_to_fit: [800, 800]
# resize_to_limit(600, 600)
end
version :medium do
process :crop_image
# process resize_to_fit: [600, 600]
resize_to_limit(600, 600)
end
version :thumb do
process :crop_image
resize_to_fill(100, 100)
end
version :tiny, from_version: :thumb do
process resize_to_fill: [20, 20]
end
def crop_image
resize_to_limit(600, 600)
unless $logo_crop_x.blank?
manipulate! do |image|
x = $logo_crop_x.to_f
y = $logo_crop_y.to_f
w = $logo_crop_w.to_f
h = $logo_crop_h.to_f
#img.crop "#{w}x#{h}+#{x}+#{y}"
image.crop([[w, h].join('x'), [x, y].join('+')].join('+'))
end
end
end
def extension_white_list
%w(jpg jpeg gif png)
end
def filename
"#{secure_token(10)}.#{file.extension}" if original_filename.present?
end
protected
def secure_token(length = 16)
return SecureRandom.hex(length / 2)
end
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment