ruby-on-rails - papercrop gem を使用してアスペクト比を制約のない比率に設定するにはどうすればよいですか?

Question

ユーザーがアップロードされた写真に必要な寸法を選択できるように、縦横比を制限しないようにしたいだけです。デフォルトは 1:1 です。どうすればこのデモのように設定できますか

Answer 1

デフォルトでは、トリミング領域とプレビュー ボックスにはaspect ratio of 1:1. 新しいアスペクトを渡すことでそれを変更できます。

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

以下のリンクには、Papercrop のドキュメントがあります。

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

ビューページで、Jqueryを次のように配置するだけです

$(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));
}

Set select では、制約のない値に変更できます。