How Can I set the aspect ratio to unconstrained ratio using papercrop gem?

Question

I just want to make the aspect ratio unconstrained so the user can select whatever dimenstion needed for the uploaded photo. The default is 1:1. so How Can I set it to be just like this demo

Answer 1

By default, the crop area and the preview box will have an aspect ratio of 1:1. You can modify that by passing a new aspect.

crop_attached_file :snapshot, :aspect => "16:9"

On the below link there is documentation for Papercrop.

http://rubydoc.info/gems/papercrop/0.0.5/frames

On your view page simply put Jquery as

$(function() {
  $('#cropbox').Jcrop({
    onChange: update_crop,
    onSelect: update_crop,
    setSelect: [0, 0, 500, 500],
    aspectRatio: 1
  });
});

function update_crop(coords) {
  var rx = 100/coords.w;
  var ry = 100/coords.h;
  $('#preview').css({
    width: Math.round(rx * <%= @user.avatar_geometry(:large).width %>) + 'px',
    height: Math.round(ry * <%= @user.avatar_geometry(:large).height %>) + 'px',
    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
    marginTop: '-' + Math.round(ry * coords.y) + 'px'
  });
  var ratio = <%= @user.avatar_geometry(:original).width %> / <%= @user.avatar_geometry(:large).width %>;
  $("#crop_x").val(Math.round(coords.x * ratio));
  $("#crop_y").val(Math.round(coords.y * ratio));
  $("#crop_w").val(Math.round(coords.w * ratio));
  $("#crop_h").val(Math.round(coords.h * ratio));
}

On Set select we can change it to the unconstrained value.