Jcrop是一个功能强大的图像裁剪引擎
来源:互联网 发布:单片机课程设计目的 编辑:程序博客网 时间:2024/06/11 20:29
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(){
});
- $( function() {
- $("#demoImage").Jcrop({
- aspectRatio: 1, //选中区域宽高比为1,即选中区域为正方形
- bgColor:"#ccc", //裁剪时背景颜色设为灰色
- bgOpacity:0.1, //透明度设为0.1
- allowResize:false, //不允许改变选中区域的大小
- setSelect:[0,0,100,100] //初始化选中区域
- }
- );
- }
- );
4.api用法
var api = $.Jcrop( "#demoImage");
api.disable(); //设置为禁用裁剪效果
api.enable(); //设置为启用裁剪效果
api.setOptions({allowResize:false});//设置相应配置
api.setSelect([0,0,100,100]); //设置选中区域
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); //得到选中区域的高度
- }
0 0
- Jcrop是一个功能强大的图像裁剪引擎
- Jcrop是一个功能强大的图像裁剪引擎
- Jcrop图像裁剪
- jQuery Jcrop 图像裁剪
- jQuery Jcrop 图像裁剪
- jQuery 图像裁剪插件Jcrop
- JQuery Jcrop—JQuery Jcrop 图像裁剪工具学习
- 头像裁剪插件Jcrop的使用示例
- 图片裁剪插件Jcrop.js的使用
- jQuery Jcrop 实现图像裁剪(附源代码)
- java实现图片处理之Jcrop 图像裁剪插件
- 使用Jcrop-canvas画布-制作前端图像裁剪
- 功能强大的JavaScript引擎--SpiderMonkey
- 功能强大的JavaScript引擎--SpiderMonkey
- 功能强大的JavaScript引擎--SpiderMonkey
- 功能强大的JavaScript引擎--SpiderMonkey
- 水晶报表是一个功能强大的报表工具2005
- 图片裁剪入门Jcrop
- Android自定义拖拉窗控件
- android-Application的使用-随心
- 地铁摸腿男被抓
- [Android] 性能获取方式-转自淘测试
- GDI坐标系统(下)
- Jcrop是一个功能强大的图像裁剪引擎
- Android开发之InstanceState详解
- shell中的条件判断、参数以及变量替换
- oracle 相关
- EM 期望最大化算法
- android_ndk打印调试信息
- 链接损坏重定向到自己设计的404错误页面
- Android 异常 弹出输入法 布局改变
- 好活动!重金悬赏——征集传智播客老学员新年视频寄语!