Jcrop是一个功能强大的图像剪裁引擎

Jcrop是一个功能强大的图像裁剪引擎

jcrop简单的事件处理Demo:

?





jcrop实例演示Demo3：

?





Jcrop实例Demo4:

?





注意：有关这些选项的对象的格式的几件事情：
文本值必须加引号（如'红'，'＃CCC“，”RGB（10,10,10）'）
数值，包括小数点，不应该被引用。
setSelect带有一个数组，这里表示为一个数组文本
aspectRatio可能是最简单的除以宽度/高度设置
后面没有逗号的最后一个选项

jQuery(function(){?
});?
全写为?
jQuery(document).ready(function(){??
});?


???????3.常用选项设置
???????aspectRatio:选中区域按宽/高比，为1表示正方形。
???????minSize:最小的宽，高值。
???????maxSize:最大的宽，高值。
???????setSelect:设置初始选中区域。
???????bgColor:背景颜色
???????bgOpacity:背景透明度。
???????allowResize:是否允许改变选中区域大小。
???????allowMove:是否允许移动选中区域。


?



1. $(?function()?{??????????????????//事件处理??
2. ????????????????$("#demoImage").Jcrop(??????????????????{??
3. ????????????????????onChange:showCoords,????//当选择区域变化的时候，执行对应的回调函数??????????????????????onSelect:showCoords?????//当选中区域的时候，执行对应的回调函数??
4. ????????????????}??????????????????);??
5. ????????????}??????????);??
6. ????????????function?showCoords(c)?{??????????????????$("#txtX1").val(c.x);???????//得到选中区域左上角横坐标??
7. ????????????????$("#txtY1").val(c.y);???????//得到选中区域左上角纵坐标??????????????????$("#txtX2").val(c.x2);??????//得到选中区域右下角横坐标??
8. ????????????????$("#txtY2").val(c.y2);??????//得到选中区域右下角纵坐标??????????????????$("#txtWidth").val(c.w);????//得到选中区域的宽度??
9. ????????????????$("#txtHeight").val(c.h);???//得到选中区域的高度??????????????}?