Jcrop是一个功能强大的图像裁剪引擎-摩杜云开发者社区

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

它的设计使开发人员可以很容易地直接集成了先进的图像裁剪功能集成到任何基于Web的应用程序在不牺牲动力和灵活性（或编码，测试和调试的星期）。Jcrop还设有干净，组织良好的代码，在大多数现代的web浏览器效果很好。

在<HEAD>你需要加载必要文件的页面这包括：
jQuery库
Jcrop的Javascript
Jcrop CSS样式表
它应该是这个样子：

1. <script src="js/jquery.min.js"> </ SCRIPT>
2. <script src="js/jquery.Jcrop.min.js"> </ SCRIPT>
3. <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

入门第一个简单点的Demo:

1. <%@ page language="java" contentType="text/html; charset=UTF-8"
2. "UTF-8"%>  
3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
4. <html>  
5. <head>  
6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
7. <title>Insert title here</title>  
8.   
9. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>  
10. <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  
11. <script src="js/jquery.Jcrop.min.js"></script>  
12. <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css"
13. <script>  
14.     jQuery(function(){  
15. '#user_preview_img').Jcrop({  
16. true
17.             });  
18.         });  
19. </script>  
20. </head>  
21. <body>  
22. "" src="images/area1/1.jpg" id="user_preview_img">  
23. </body>  
24. </html>

效果图：

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

jcrop简单的事件处理Demo:

1. <%@ page language="java" contentType="text/html; charset=UTF-8"
2. "UTF-8"%>  
3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
4. <html>  
5. <head>  
6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
7. <title>Insert title here</title>  
8.   
9. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>  
10. <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  
11. <script src="js/jquery.Jcrop.min.js"></script>  
12. <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css"
13. <script>  
14. jQuery(document).ready(function(){  
15.   
16. '#user_preview_img').Jcrop({  
17.         onChange: showCoords,  
18.         onSelect: showCoords  
19.     });  
20.   
21. });  
22.   
23. // Simple event handler, called from onChange and onSelect
24. // event handlers, as per the Jcrop invocation above
25. function showCoords(c)  
26. {  
27. '#x1').val(c.x);  
28. '#y1').val(c.y);  
29. '#x2').val(c.x2);  
30. '#y2').val(c.y2);  
31. '#w').val(c.w);  
32. '#h').val(c.h);  
33. };  
34. </script>  
35. </head>  
36. <body>  
37. "" src="images/area1/1.jpg" id="user_preview_img"></div>  
38.       
39. "return false;" class="coords">  
40. "text" size="4" id="x1" name="x1"
41. "text" size="4" id="y1" name="y1"
42. "text" size="4" id="x2" name="x2"
43. "text" size="4" id="y2" name="y2"
44. "text" size="4" id="w" name="w"
45. "text" size="4" id="h" name="h"
46.         </form>  
47.       
48. </body>  
49. </html>

效果图：

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

jcrop实例演示Demo3：

1. <%@ page language="java" contentType="text/html; charset=UTF-8"
2. "UTF-8"%>  
3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
4. <html>  
5. <head>  
6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
7. <title>Insert title here</title>  
8.   
9. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>  
10. <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  
11. <script src="js/jquery.Jcrop.min.js"></script>  
12. <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css"
13. <script>  
14. jQuery(document).ready(function(){  
15.   
16. '#user_preview_img').Jcrop({  
17.           onChange: showCoords,  
18.           onSelect: showCoords,  
19. 'red',  
20. 4,  
21. 100, 100, 50, 50
22. 16 / 9
23.     });  
24.   
25. });  
26.   
27. // Simple event handler, called from onChange and onSelect
28. // event handlers, as per the Jcrop invocation above
29. function showCoords(c)  
30. {  
31. '#x1').val(c.x);  
32. '#y1').val(c.y);  
33. '#x2').val(c.x2);  
34. '#y2').val(c.y2);  
35. '#w').val(c.w);  
36. '#h').val(c.h);  
37. };  
38. </script>  
39. </head>  
40. <body>  
41. "" src="images/area1/1.jpg" id="user_preview_img"></div>  
42.       
43. "return false;" class="coords">  
44. "text" size="4" id="x1" name="x1"
45. "text" size="4" id="y1" name="y1"
46. "text" size="4" id="x2" name="x2"
47. "text" size="4" id="y2" name="y2"
48. "text" size="4" id="w" name="w"
49. "text" size="4" id="h" name="h"
50.         </form>  
51.       
52. </body>  
53. </html>

效果图：

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

Jcrop实例Demo4:

1. <%@ page language="java" contentType="text/html; charset=UTF-8"
2. "UTF-8"%>  
3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
4. <html>  
5. <head>  
6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
7. <title>Insert title here</title>  
8.   
9. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>  
10. <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  
11. <script src="js/jquery.Jcrop.min.js"></script>  
12. <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css"
13. <script type="text/javascript">  
14.   jQuery(function($){  
15.   
16. // Create variables (in this scope) to hold the API and image size
17.     var jcrop_api,  
18.         boundx,  
19.         boundy,  
20.   
21. // Grab some information about the preview pane
22. '#preview-pane'),  
23. '#preview-pane .preview-container'),  
24. '#preview-pane .preview-container img'),  
25.   
26.         xsize = $pcnt.width(),  
27.         ysize = $pcnt.height();  
28.       
29. 'init',[xsize,ysize]);  
30. '#user_preview_img').Jcrop({  
31.       onChange: updatePreview,  
32.       onSelect: updatePreview,  
33.       aspectRatio: xsize / ysize  
34.     },function(){  
35. // Use the API to get the real image size
36. this.getBounds();  
37. 0];  
38. 1];  
39. // Store the API in the jcrop_api variable
40. this;  
41.   
42. // Move the preview into the jcrop container for css positioning
43.       $preview.appendTo(jcrop_api.ui.holder);  
44.     });  
45.   
46.     function updatePreview(c)  
47.     {  
48. if (parseInt(c.w) > 0)  
49.       {  
50.         var rx = xsize / c.w;  
51.         var ry = ysize / c.h;  
52.   
53.         $pimg.css({  
54. 'px',  
55. 'px',  
56. '-' + Math.round(rx * c.x) + 'px',  
57. '-' + Math.round(ry * c.y) + 'px'
58.         });  
59.       }  
60.     };  
61.   
62.   });  
63.   
64.   
65. </script>  
66.   
67.   
68. <style type="text/css">  
69. /* Apply these styles only when #preview-pane has
70.    been placed within the Jcrop widget */
71. .jcrop-holder #preview-pane {  
72.   display: block;  
73.   position: absolute;  
74. 2000;  
75.   top: 10px;  
76.   right: -280px;  
77.   padding: 6px;  
78. 0,0,0,.4) solid;  
79.   background-color: white;  
80.   
81.   -webkit-border-radius: 6px;  
82.   -moz-border-radius: 6px;  
83.   border-radius: 6px;  
84.   
85. 0, 0, 0, 0.2);  
86. 0, 0, 0, 0.2);  
87. 0, 0, 0, 0.2);  
88. }  
89.   
90. /* The Javascript code will set the aspect ratio of the crop
91.    area based on the size of the thumbnail preview,
92.    specified here */
93. #preview-pane .preview-container {  
94.   width: 250px;  
95.   height: 170px;  
96.   overflow: hidden;  
97. }  
98. </style>  
99.   
100. </head>  
101. <body>  
102. "" src="images/area1/1.jpg" id="user_preview_img"></div>  
103.       
104. "preview-pane">  
105. class="preview-container">  
106. "images/area1/1.jpg" class="jcrop-preview" alt="Preview"
107.     </div>  
108.   </div>  
109. </body>  
110. </html>

效果图:

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

注意：有关这些选项的对象的格式的几件事情：
文本值必须加引号（如'红'，'＃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. 1,             //选中区域宽高比为1，即选中区域为正方形     
4. "#ccc",             //裁剪时背景颜色设为灰色
5. 0.1,              //透明度设为0.1
6. false,          //不允许改变选中区域的大小
7. 0,0,100,100]     //初始化选中区域
8.               }  
9.          );          
10.     }  
11. );

4.api用法

var api = $.Jcrop("#demoImage");
 api.disable();                      //设置为禁用裁剪效果
api.enable();                       //设置为启用裁剪效果
api.setOptions({allowResize:false});//设置相应配置
api.setSelect([0,0,100,100]);       //设置选中区域

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