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

时间:2012-07-14 04:51:01

标签: jquery jcrop

我无法理解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 个答案:

答案 0 :(得分:2)

我看了看这个Jcrop的东西。它看起来像是在计算这些值时,可以说它们是Math.round()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文件,并且所有文件都应该开箱即用。