如何使用papercrop gem将纵横比设置为不受约束的比率?

时间:2012-10-10 11:54:45

标签: ruby-on-rails ruby paperclip jcrop

我只是想使宽高比不受约束,以便用户可以选择上传照片所需的任何尺寸。默认值为1:1。那么如何将其设置为像demo

一样

1 个答案:

答案 0 :(得分:0)

默认情况下,裁剪区域和预览框将显示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));
}

在设置选择中,我们可以将其更改为无约束值。