`
wbj0110
  • 浏览: 1604641 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

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

JcropJs 
阅读更多

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

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

 

 

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

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  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简单的事件处理Demo:

 

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  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实例演示Demo3：

 

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  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实例Demo4:

 

[java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  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>  


效果图:


注意：有关这些选项的对象的格式的几件事情：
文本值必须加引号（如'红'，'＃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?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  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.             } 
分享到：
| Linux 查看CPU信息、机器型号等硬件信息
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Jcrop图片预览裁剪-图片预览裁剪

    总结来说，Jcrop是一款强大的图片预览和裁剪工具，它提供了灵活的配置选项、丰富的事件接口以及便捷的API，使得开发者能轻松地在Web应用中实现图片裁剪功能。通过合理地利用Jcrop，可以提升用户体验并简化图像处理...

    jcrop + jquery+struts2 图片裁剪

    "jcrop + jquery + struts2 图片裁剪"的组合提供了一种强大的解决方案，它整合了三个关键的技术来实现用户友好的图像裁剪功能。 首先，Jcrop是jQuery的一个插件，专门用于图像的选择和裁剪。它允许用户通过鼠标或...

    jQuery Jcrop图像裁剪的插件结合java后台实现图片裁剪的功能

    jQuery Jcrop是一个在前端广泛应用的JavaScript插件，专门用于实现图像裁剪功能。它与后端技术如Java相结合，能够为Web应用提供完整的图片处理解决方案。Jcrop的强大之处在于其简单易用的API，允许开发者轻松地将...

    jQuery图像裁剪插件Jcrop.js.zip

    jQuery图像裁剪插件Jcrop....总结来说，Jcrop.js是一个强大的jQuery图像裁剪插件，它简化了前端图像裁剪的实现，提供了丰富的功能和灵活性。无论是个人项目还是企业级应用，Jcrop都是实现网页图像裁剪功能的理想选择。

    jcrop图片裁剪demo

    “jcrop图片裁剪demo”是一个简单易用的Jcrop应用实例，它演示了如何在网页上集成图片裁剪功能。通过学习这个demo，开发者可以快速掌握Jcrop的基本用法，并将其应用到自己的项目中，提供用户友好的图片裁剪体验。...

    jcrop裁剪图片

    首先，Jcrop的核心功能是为用户提供一个交互式的图像选区，用户可以通过拖动和缩放来选择图片中的任意区域进行裁剪。该插件支持响应式设计，可以在各种设备和屏幕尺寸上正常工作，确保了良好的用户体验。Jcrop的API...

    jquery-Jcrop实现图片裁剪截图上传和保存

    **jQuery Jcrop** 是一个基于JavaScript的开源库，专门用于图像选择和裁剪。它提供了丰富的功能，使得在网页上实现图片的裁剪、截图和上传变得轻而易举。这个库非常适合用来创建用户可以自定义裁剪区域的场景，比如...

    jcrop做一个上传头像

    标题中的"jcrop做一个上传头像"指的是使用Jcrop这个JavaScript库来实现用户上传图片并进行裁剪的功能。Jcrop是一款强大的图像裁剪工具，它允许用户在网页前端选择并裁剪图片，然后将裁剪的坐标信息发送到后台服务器...

    jQuery Jcrop 实现图像裁剪Demo

    总结来说，jQuery Jcrop是一个功能丰富的JavaScript图像裁剪库，通过它你可以轻松地在网页上添加图像裁剪功能。结合Java后端，你可以实现完整的图像裁剪流程，包括客户端的交互和服务器端的图像处理。这个“jQuery ...

    Jcrop实现图片上传裁剪功能,包含前后端代码,可直接发布运行

    在这个项目中，我们看到一个完整的解决方案，包括前端和后端代码，可以实现图片上传和裁剪功能，并且可以直接部署和运行。 **Jcrop简介** Jcrop是基于jQuery的开源库，提供了一套用户友好的交互式图像裁剪工具。它...

    thinkphp +jquery +Jcrop+ajaxfileupload上传图片并裁剪保存到数据库

    本教程将详细介绍如何使用ThinkPHP框架、jQuery库、Jcrop图像裁剪工具以及AjaxFileUpload插件实现一个无刷新的图片上传和裁剪功能，最后将裁剪后的图片保存到数据库。 首先，`ThinkPHP`是一个流行的PHP框架，它提供...

    java+jq+jcrop缩放裁剪上传图片

    这个"java+jq+jcrop缩放裁剪上传图片"的主题涵盖了三个关键部分：Java后端处理、jQuery（jq）前端交互以及Jcrop图像裁剪库的使用。下面将详细解释这三个方面的知识点。 首先，让我们来看看前端部分。jQuery（jq）是...

    Jcrop图片裁剪必须的JS文件

    总的来说，Jcrop是一个强大的图片裁剪工具，通过灵活的配置和丰富的API，可以轻松集成到各种Web应用中，满足用户自定义裁剪的需求。在实际开发中，需要结合HTML、CSS和JavaScript技能，以及对图像处理的理解，才能...

    jQuery Jcrop 实现图像裁剪实例

    Jcrop是一款强大的JavaScript库，它为Web应用程序提供了用户友好的图像选择和裁剪工具。这个实例将帮助开发者理解Jcrop的工作原理，并指导如何将其整合到自己的项目中。 首先，我们需要了解Jcrop的基本概念。Jcrop...

    Jcrop插件对图片进行裁剪示例

    在本示例中，我们将深入探讨如何结合Jcrop与Java技术，实现一个完整的图片裁剪功能。 首先，Jcrop的核心在于它的交互性和灵活性。用户可以通过鼠标拖动来选择图片上的任意部分，其选定区域可以自适应图像大小，支持...

    jcrop图片剪切工具

    3. **多图裁剪**：可以同时对多张图片进行裁剪，只需为每张图片创建一个Jcrop实例。 4. **动画效果**：可以设置动画效果，如缓动效果，提升用户体验。 **四、Jcrop与后端交互** 1. **数据传输**：通过`...

    移动端图片上传和裁剪-Jcrop实现

    Jcrop是一款强大的JavaScript图像裁剪工具，它允许用户通过网页交互方式自由选择图片的裁剪区域。这个库基于jQuery，因此需要先引入jQuery才能使用。Jcrop的核心特性包括： 1. **实时预览**：用户可以在选择裁剪...

    jQuery图片裁剪插件Jcrop.js

    Jcrop.js是一款基于jQuery的开源图片裁剪工具，它为网页开发者提供了一种高效、灵活的方式来实现图像裁剪功能。在网页设计中，用户经常需要上传图片并根据需求进行裁剪，以适应特定的尺寸或比例。Jcrop.js就是解决这...

Magicbox
Global site tag (gtag.js) - Google Analytics