如何为 Jcrop 'setSelect' 选项指定自定义值？

Posted 2023-02-25

【中文标题】如何为 Jcrop \'setSelect\' 选项指定自定义值？

【英文标题】：How can I specify a customized value for the Jcrop 'setSelect' option?如何为 Jcrop 'setSelect' 选项指定自定义值？

【发布时间】：2012-07-14 04:51:00

【问题描述】：

我无法理解 Jcrop 'setSelect' 选项。在 jCrop 网站上，它列出了一个示例

setSelect:   [ 100, 100, 50, 50 ]

他们通常称之为

setSelect:   [ x, y, x2, y2 ]

现在，在数学上，我假设这意味着图像左下角和右上角的坐标。也就是说，(x,y) 和 (x2,y2) 是坐标。但是他们给出的例子似乎表明它分别是右上角和左下角。这似乎很奇怪。无论如何，我试图概括 setSelect 功能，因为我可能不知道将被“jCropped”的照片的确切尺寸。这是我的代码，但它不起作用：

setSelect:   [ $('#cropbox').width()/4,
               $('#cropbox').height()/4,
               ($('#cropbox').width()/4)*3,
               ($('#cropbox').height()/4)*3]

使用此代码时未选择任何内容。但是，当我使用示例代码setSelect: [ 100, 100, 50, 50 ] 时，它可以工作。但我不想使用它，因为我不知道被裁剪照片的实际尺寸。为什么我的代码不起作用？

【参考方案1】：

我看了看这个 Jcrop 东西。看起来当它计算这些值时，它期望它们是Math.round()ed，可以这么说。 I've put together a jsFiddle showing the core of what needs to be done.

另外，这里是代码 ->

jQuery ->

var jcrop_api;
jcrop_api = $.Jcrop('#cropbox');
function getDimensions()
  return [
    Math.round($('#cropbox').width() / 2),
    Math.round($('#cropbox').height()/2),
    Math.round($('#cropbox').width()/ 4),
    Math.round($('#cropbox').height()/4)
  ];

$(function()
  $('#setSelect').click(function()
    jcrop_api.setSelect(getDimensions());
  );      
);

HTML 结构 ->

<div id="cropbox">
   <img src="http://media.giantbomb.com/uploads/2/27962/1867070-illionois_state_bird_and_flower.jpg" />     
</div><br/>
<button id="setSelect"> Set Select </button>

确保您包含此插件的相关 JS 和 CSS 文件，所有这些文件都应该是开箱即用的。