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

我无法理解Jcrop的“setSelect”选项。在jCrop网站也列出了一个例子作为如何为Jcrop'setSelect'选项指定自定义值？

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 ]时，它可以工作。但我不想使用这个，因为我不知道裁剪照片的实际尺寸。为什么我的代码不工作？

来源

2012-07-14 Ajay Mohite

我看了看这个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文件，所有应该开箱即用。

来源

2012-07-14 05:28:53 Ohgodwhy

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

回答

相关问题