Jcrop是一个功能强大的图像裁剪引擎jQuery的。
它的设计使开发人员可以很容易地直接集成了先进的图像裁剪功能集成到任何基于Web的应用程序在不牺牲动力和灵活性(或编码,测试和调试的星期)。Jcrop还设有干净,组织良好的代码,在大多数现代的web浏览器效果很好。
在<HEAD>你需要加载必要文件的页面 这包括:
jQuery库
Jcrop的Javascript
Jcrop CSS样式表
它应该是这个样子:
- <script src="js/jquery.min.js"> </ SCRIPT>
- <script src="js/jquery.Jcrop.min.js"> </ SCRIPT>
- <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
入门第一个简单点的Demo:
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
- <title>Insert title here</title>
- <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
- <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
- <script src="js/jquery.Jcrop.min.js"></script>
- <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
- <script>
- jQuery(function(){
- jQuery('#user_preview_img').Jcrop({
- trackDocument: true
- });
- });
- </script>
- </head>
- <body>
- <img alt="" src="images/area1/1.jpg" id="user_preview_img">
- </body>
- </html>
效果图:
jcrop简单的事件处理Demo:
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
- <title>Insert title here</title>
- <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
- <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
- <script src="js/jquery.Jcrop.min.js"></script>
- <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
- <script>
- jQuery(document).ready(function(){
- jQuery('#user_preview_img').Jcrop({
- onChange: showCoords,
- onSelect: showCoords
- });
- });
- // Simple event handler, called from onChange and onSelect
- // event handlers, as per the Jcrop invocation above
- function showCoords(c)
- {
- jQuery('#x1').val(c.x);
- jQuery('#y1').val(c.y);
- jQuery('#x2').val(c.x2);
- jQuery('#y2').val(c.y2);
- jQuery('#w').val(c.w);
- jQuery('#h').val(c.h);
- };
- </script>
- </head>
- <body>
- <div><img alt="" src="images/area1/1.jpg" id="user_preview_img"></div>
- <form onsubmit="return false;" class="coords">
- <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
- <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
- <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
- <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
- <label>W <input type="text" size="4" id="w" name="w" /></label>
- <label>H <input type="text" size="4" id="h" name="h" /></label>
- </form>
- </body>
- </html>
效果图:
jcrop实例演示Demo3:
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
- <title>Insert title here</title>
- <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
- <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
- <script src="js/jquery.Jcrop.min.js"></script>
- <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
- <script>
- jQuery(document).ready(function(){
- jQuery('#user_preview_img').Jcrop({
- onChange: showCoords,
- onSelect: showCoords,
- bgColor: 'red',
- bgOpacity: .4,
- setSelect: [ 100, 100, 50, 50 ],
- aspectRatio: 16 / 9
- });
- });
- // Simple event handler, called from onChange and onSelect
- // event handlers, as per the Jcrop invocation above
- function showCoords(c)
- {
- jQuery('#x1').val(c.x);
- jQuery('#y1').val(c.y);
- jQuery('#x2').val(c.x2);
- jQuery('#y2').val(c.y2);
- jQuery('#w').val(c.w);
- jQuery('#h').val(c.h);
- };
- </script>
- </head>
- <body>
- <div><img alt="" src="images/area1/1.jpg" id="user_preview_img"></div>
- <form onsubmit="return false;" class="coords">
- <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
- <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
- <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
- <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
- <label>W <input type="text" size="4" id="w" name="w" /></label>
- <label>H <input type="text" size="4" id="h" name="h" /></label>
- </form>
- </body>
- </html>
效果图:
Jcrop实例Demo4:
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
- <title>Insert title here</title>
- <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
- <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
- <script src="js/jquery.Jcrop.min.js"></script>
- <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
- <script type="text/javascript">
- jQuery(function($){
- // Create variables (in this scope) to hold the API and image size
- var jcrop_api,
- boundx,
- boundy,
- // Grab some information about the preview pane
- $preview = $('#preview-pane'),
- $pcnt = $('#preview-pane .preview-container'),
- $pimg = $('#preview-pane .preview-container img'),
- xsize = $pcnt.width(),
- ysize = $pcnt.height();
- console.log('init',[xsize,ysize]);
- $('#user_preview_img').Jcrop({
- onChange: updatePreview,
- onSelect: updatePreview,
- aspectRatio: xsize / ysize
- },function(){
- // Use the API to get the real image size
- var bounds = this.getBounds();
- boundx = bounds[0];
- boundy = bounds[1];
- // Store the API in the jcrop_api variable
- jcrop_api = this;
- // Move the preview into the jcrop container for css positioning
- $preview.appendTo(jcrop_api.ui.holder);
- });
- function updatePreview(c)
- {
- if (parseInt(c.w) > 0)
- {
- var rx = xsize / c.w;
- var ry = ysize / c.h;
- $pimg.css({
- width: Math.round(rx * boundx) + 'px',
- height: Math.round(ry * boundy) + 'px',
- marginLeft: '-' + Math.round(rx * c.x) + 'px',
- marginTop: '-' + Math.round(ry * c.y) + 'px'
- });
- }
- };
- });
- </script>
- <style type="text/css">
- /* Apply these styles only when #preview-pane has
- been placed within the Jcrop widget */
- .jcrop-holder #preview-pane {
- display: block;
- position: absolute;
- z-index: 2000;
- top: 10px;
- right: -280px;
- padding: 6px;
- border: 1px rgba(0,0,0,.4) solid;
- background-color: white;
- -webkit-border-radius: 6px;
- -moz-border-radius: 6px;
- border-radius: 6px;
- -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
- -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
- box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
- }
- /* The Javascript code will set the aspect ratio of the crop
- area based on the size of the thumbnail preview,
- specified here */
- #preview-pane .preview-container {
- width: 250px;
- height: 170px;
- overflow: hidden;
- }
- </style>
- </head>
- <body>
- <div><img alt="" src="images/area1/1.jpg" id="user_preview_img"></div>
- <div id="preview-pane">
- <div class="preview-container">
- <img src="images/area1/1.jpg" class="jcrop-preview" alt="Preview" />
- </div>
- </div>
- </body>
- </html>
效果图:
注意:有关这些选项的对象的格式的几件事情:
文本值必须加引号(如'红','#CCC“,”RGB(10,10,10)')
数值,包括小数点,不应该被引用。
setSelect带有一个数组,这里表示为一个数组文本
aspectRatio可能是最简单的除以宽度/高度设置
后面没有逗号的最后一个选项
jQuery(function(){
});
全写为
jQuery(document).ready(function(){
});
3.常用选项设置
aspectRatio:选中区域按宽/高比,为1表示正方形。
minSize:最小的宽,高值。
maxSize:最大的宽,高值。
setSelect:设置初始选中区域。
bgColor:背景颜色
bgOpacity:背景透明度。
allowResize:是否允许改变选中区域大小。
allowMove:是否允许移动选中区域。
- $( function() {
- $("#demoImage").Jcrop({
- aspectRatio: 1, //选中区域宽高比为1,即选中区域为正方形
- bgColor:"#ccc", //裁剪时背景颜色设为灰色
- bgOpacity:0.1, //透明度设为0.1
- allowResize:false, //不允许改变选中区域的大小
- setSelect:[0,0,100,100] //初始化选中区域
- }
- );
- }
- );
4.api用法
api.disable(); //设置为禁用裁剪效果
api.enable(); //设置为启用裁剪效果
api.setOptions({allowResize:false});//设置相应配置
api.setSelect([0,0,100,100]); //设置选中区域
- $( function() {
- //事件处理
- $("#demoImage").Jcrop(
- {
- onChange:showCoords, //当选择区域变化的时候,执行对应的回调函数
- onSelect:showCoords //当选中区域的时候,执行对应的回调函数
- }
- );
- }
- );
- function showCoords(c) {
- $("#txtX1").val(c.x); //得到选中区域左上角横坐标
- $("#txtY1").val(c.y); //得到选中区域左上角纵坐标
- $("#txtX2").val(c.x2); //得到选中区域右下角横坐标
- $("#txtY2").val(c.y2); //得到选中区域右下角纵坐标
- $("#txtWidth").val(c.w); //得到选中区域的宽度
- $("#txtHeight").val(c.h); //得到选中区域的高度
- }
相关推荐
jquery Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(例如:java)可以快速的实现图片裁剪的功能
Jcrop图片预览裁剪功能,兼容IE8及IE8+和主流浏览器,预览框高度不限制,如需要限制高度需自行改写,也可留言联系。
jQuery图像裁剪插件Jcrop.js是一款功能强大的jQuery图像裁剪插件,可以结合后端程序快速的实现图片裁剪的功能。
jcrop图片裁剪demo,简单的jcrop图片裁剪demo,下载后可以直接用
jcrop + jquery+struts2 图片裁剪,要想开发出符合自己的图片,请先看API
###Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(如:PHP)可以快速的实现图片裁剪的功能。 ###图片截取的原理: 在后台来进行图片的切割,在前台使用jcrop获取切面的x轴坐标、y轴坐标、切面高度、切面...
基于java web项目和Jquery 的Jcrop实现对图片的上传即时显示并裁剪,最终保存裁剪结果。文件包含 JAVA源码和数据库脚本,创建数据库,导入脚本,项目导入开发工具部署即可看到即时裁剪效果。
jQuery Jcrop 实现图像裁剪实例。
###Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(如:PHP)可以快速的实现图片裁剪的功能。 ###图片截取的原理: 在后台来进行图片的切割,在前台使用jcrop获取切面的x轴坐标、y轴坐标、切面高度、切面...
Jcrop (官方的) - 图片裁剪jQuery插件
新鲜的Jcrop图像裁剪中文文档,纯手工翻译,如有需要请自取
jQuery Jcrop 实现图像裁剪Demo.
jquery-Jcrop实现图片裁剪截图上传和保存。
新鲜的jcrop图像裁剪中文文档,markdown版,纯手工翻译
Jcrop插件,进行图片选取,后台java对图片进行裁剪
新鲜的jcrop图像裁剪中文文档,html版,纯手工翻译需要请自取
裁剪上传图片 jcrop
jcrop做一个上传头像 后台程序获取页面上裁剪的图片
Jcrop实现图片上传裁剪功能,包含前后端代码,可直接发布运行,后端代码为java