您的位置: 首页  >  文章  >  Jcrop是一个功能强大的图像裁剪引擎

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

分类: 文章 • 2024-10-29 16:46:10

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

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

 

 

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

[html] view plaincopyprint?Jcrop是一个功能强大的图像裁剪引擎Jcrop是一个功能强大的图像裁剪引擎
  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:

[java] view plaincopyprint?Jcrop是一个功能强大的图像裁剪引擎Jcrop是一个功能强大的图像裁剪引擎
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="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.             jQuery('#user_preview_img').Jcrop({  
  16.                 trackDocument: true  
  17.             });  
  18.         });  
  19. </script>  
  20. </head>  
  21. <body>  
  22.     <img alt="" src="images/area1/1.jpg" id="user_preview_img">  
  23. </body>  
  24. </html>  

 

效果图：

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

jcrop简单的事件处理Demo:

 

[java] view plaincopyprint?Jcrop是一个功能强大的图像裁剪引擎Jcrop是一个功能强大的图像裁剪引擎
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="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.     jQuery('#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.     jQuery('#x1').val(c.x);  
  28.     jQuery('#y1').val(c.y);  
  29.     jQuery('#x2').val(c.x2);  
  30.     jQuery('#y2').val(c.y2);  
  31.     jQuery('#w').val(c.w);  
  32.     jQuery('#h').val(c.h);  
  33. };  
  34. </script>  
  35. </head>  
  36. <body>  
  37.    <div><img alt="" src="images/area1/1.jpg" id="user_preview_img"></div>  
  38.       
  39.         <form onsubmit="return false;" class="coords">  
  40.             <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>  
  41.             <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>  
  42.             <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>  
  43.             <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>  
  44.             <label>W <input type="text" size="4" id="w" name="w" /></label>  
  45.             <label>H <input type="text" size="4" id="h" name="h" /></label>  
  46.         </form>  
  47.       
  48. </body>  
  49. </html>  


效果图：

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

jcrop实例演示Demo3：

 

[java] view plaincopyprint?Jcrop是一个功能强大的图像裁剪引擎Jcrop是一个功能强大的图像裁剪引擎
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="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.     jQuery('#user_preview_img').Jcrop({  
  17.           onChange: showCoords,  
  18.           onSelect: showCoords,  
  19.           bgColor: 'red',  
  20.           bgOpacity: .4,  
  21.           setSelect: [ 100, 100, 50, 50 ],  
  22.           aspectRatio: 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.     jQuery('#x1').val(c.x);  
  32.     jQuery('#y1').val(c.y);  
  33.     jQuery('#x2').val(c.x2);  
  34.     jQuery('#y2').val(c.y2);  
  35.     jQuery('#w').val(c.w);  
  36.     jQuery('#h').val(c.h);  
  37. };  
  38. </script>  
  39. </head>  
  40. <body>  
  41.    <div><img alt="" src="images/area1/1.jpg" id="user_preview_img"></div>  
  42.       
  43.         <form onsubmit="return false;" class="coords">  
  44.             <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>  
  45.             <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>  
  46.             <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>  
  47.             <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>  
  48.             <label>W <input type="text" size="4" id="w" name="w" /></label>  
  49.             <label>H <input type="text" size="4" id="h" name="h" /></label>  
  50.         </form>  
  51.       
  52. </body>  
  53. </html>  


效果图：

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

Jcrop实例Demo4:

 

[java] view plaincopyprint?Jcrop是一个功能强大的图像裁剪引擎Jcrop是一个功能强大的图像裁剪引擎
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="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 = $('#preview-pane'),  
  23.         $pcnt = $('#preview-pane .preview-container'),  
  24.         $pimg = $('#preview-pane .preview-container img'),  
  25.   
  26.         xsize = $pcnt.width(),  
  27.         ysize = $pcnt.height();  
  28.       
  29.     console.log('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.       var bounds = this.getBounds();  
  37.       boundx = bounds[0];  
  38.       boundy = bounds[1];  
  39.       // Store the API in the jcrop_api variable  
  40.       jcrop_api = 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.           width: Math.round(rx * boundx) + 'px',  
  55.           height: Math.round(ry * boundy) + 'px',  
  56.           marginLeft: '-' + Math.round(rx * c.x) + 'px',  
  57.           marginTop: '-' + 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.   z-index: 2000;  
  75.   top: 10px;  
  76.   right: -280px;  
  77.   padding: 6px;  
  78.   border: 1px rgba(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.   -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);  
  86.   -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);  
  87.   box-shadow: 1px 1px 5px 2px rgba(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.    <div><img alt="" src="images/area1/1.jpg" id="user_preview_img"></div>  
  103.       
  104.    <div id="preview-pane">  
  105.     <div class="preview-container">  
  106.       <img src="images/area1/1.jpg" class="jcrop-preview" alt="Preview" />  
  107.     </div>  
  108.   </div>  
  109. </body>  
  110. </html>  


效果图:

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

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

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

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

 

[java] view plaincopyprint?Jcrop是一个功能强大的图像裁剪引擎Jcrop是一个功能强大的图像裁剪引擎
  1. $( function() {                  
  2.         $("#demoImage").Jcrop({  
  3.                     aspectRatio: 1,             //选中区域宽高比为1，即选中区域为正方形       
  4.                     bgColor:"#ccc",             //裁剪时背景颜色设为灰色  
  5.                     bgOpacity:0.1,              //透明度设为0.1  
  6.                     allowResize:false,          //不允许改变选中区域的大小  
  7.                     setSelect:[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]);       //设置选中区域

 

[java] view plaincopyprint?Jcrop是一个功能强大的图像裁剪引擎Jcrop是一个功能强大的图像裁剪引擎
  1. $( function() {  
  2.                 //事件处理  
  3.                 $("#demoImage").Jcrop(  
  4.                 {  
  5.                     onChange:showCoords,    //当选择区域变化的时候，执行对应的回调函数  
  6.                     onSelect:showCoords     //当选中区域的时候，执行对应的回调函数  
  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.             } 

相关推荐