如何使用papercrop gem将纵横比设置为不受限制的比例？

Posted 2023-02-25

【中文标题】如何使用papercrop gem将纵横比设置为不受限制的比例？

【英文标题】：How Can I set the aspect ratio to unconstrained ratio using papercrop gem?

【发布时间】：2012-10-10 11:54:45

【问题描述】：

我只想让宽高比不受限制，以便用户可以选择上传照片所需的任何尺寸。默认值为 1:1。那么我该如何设置它就像这样demo

【参考方案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));

在设置选择时，我们可以将其更改为不受约束的值。

【讨论】：

是的，那么我怎样才能像演示一样将纵横比设置为不受限制？？