基于jQuery的图片剪切插件


Posted in Javascript onAugust 03, 2011

第一步:建立工作区间

首先,我们要位我们这个教程建立一个工作区间,建立如图所示的文件层次结构,以及新建相应的空文件。

基于jQuery的图片剪切插件


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="resources/css/style.css" rel="stylesheet" type="text/css" />
<link href="resources/js/imageCrop/jquery.imagecrop.css" rel="stylesheet" type="text/css" />
<script src="resources/js/imageCrop/jquery.imagecrop.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<h1>
Jquery Image Croping plug-in</h1>
<div class="image-decorator">
<img alt="Jquery Image Croping plug-in" height="360px" id="example" src="resources/images/example.JPG"
width="480" /></div><!--图片修饰层-->
</div><!--#包裹层 -->
</form>
</body>
</html>
[/code]
style.css
* { 
margin : 0; 
outline : 0; 
padding : 0; 
} 
/*初始化网页样式*/ 
body { 
background-color : #ededed; 
color : #646464; 
font-family : 'Verdana', 'Geneva', sans-serif; 
font-size : 12px; 
text-shadow : 0 1px 0 #ffffff; 
} 
h1 { 
font-size : 24px; 
font-weight : normal; 
margin : 0 0 10px 0; 
} 
div#wrapper { 
margin : 25px 25px 25px 25px; 
} 
/*选择id为wrapper的div*/ 
div.image-decorator { 
-moz-border-radius : 5px 5px 5px 5px;/*针对火狐的浏览器的盒子的锐化*/ 
-moz-box-shadow : 0 0 6px #c8c8c8;/*针对火狐的浏览器的盒子的边框阴影处理*/ 
-webkit-border-radius : 5px 5px 5px 5px;/*WebKit 是一个开源的浏览器引擎*/ 
-webkit-box-shadow : 0 0 6px #c8c8c8; 
background-color : #ffffff; 
border : 1px solid #c8c8c8; 
border-radius : 5px 5px 5px 5px; 
box-shadow : 0 0 6px #c8c8c8; 
display : inline-block;/*将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。支持的浏览器有:Opera、Safari*/ 
height : 360px; 
padding : 5px 5px 5px 5px; 
width : 480px; 
}

以上我们通过改变背景颜色和设置一些基本的样式,使我们的页面更具有可观赏性。
第三步:写一个基本的jQuery插件
让我们开始写一个基本的jQuery插件吧,在写之前,如果读者你从未有写jQuery插件的经历,建议先看看官方给出的插件教程(http://docs.jquery.com/Plugins/Authoring),这个是英文版的,中文版的没找的,写者打算翻译,敬请期待。
打开/resources/js/imageCrop/jquery.imagecrop.js,并且加入如下图所示的js代码
//一般情况下请将所写的插件代码包含在‘(function($) { // 插件代码在这里 }) (jQuery);' 
(function($) { 
$.imageCrop = function(object, customOptions) {}; 
$.fn.imageCrop = function (customOptions) { 
//Iterate over each object 
//对每一个对象进行迭代 
this.each(function () { 
var currentObject = this, 
image = new Image(); 
//当对象加载完毕时,给予附加上imageCrop剪切的功能 
image.onload = function () { 
$.imageCrop(currentObject, customOptions); 
}; 
//重设图片的地址,因为有时被缓存的图像不能被很快的加载 
image.src = currentObject.src; 
}); 
//除非你的插件返回一个确定的值,那么通常情况下要求函数返回‘this'关键字 
//以此来保持编程的链式化 
return this; 
}; 
}) (jQuery);

我们刚刚扩展了jQuery,通过在jQuery.fn这个对象上新添加一个方法属性。现在我们完成了对每一个对象进行迭代并当其加载完毕时为其附上imageCrop功能的基本插件。注意到被缓存的图片可能不会被很快的下载,所以重置了它的图片地址。

第四步:加入可定制的选择

通过可以定制的选择,使得对用户来说有了更多的选择以及使插件更加具有灵活性。(备注:以下代码均按照顺序来的)

//将插件的选项封装在一个常量对象中,远远好于传递一长串参数来传递。 
//这样使得可以在插件默认的情况下进行扩展 
var defaultOptions = { 
allowMove: true, 
allowResize: true, 
allowSelect: true, 
minSelect: [0, 0], 
outlineOpacity: 0.5, 
overlayOpacity: 0.5, 
selectionPosition: [0, 0], 
selectionWidth: 0, 
selectionHeight: 0 
}; // 将选项设为默认选项 
var options = defaultOptions; 
// 然后将其和客户定制的选项合并 
setOptions(customOptions);

以上我们通过定义一个包含默认选项的数组,然后通过使用setOption函数来实现将默认选项和定制选项进行合并。现在让我们来写这个合并函数体
// 将默认选项和客户定制的选项合并 
function setOptions(customOptions) { 
options = $.extend(options, customOptions); 
};

$.extend()函数实现了将两个或者多个对象合并到第一个对象中的功能。

选项

下面的列表解释了插件中的每一个选项

allowMove ? 指定选择区是否可以移动(默认的值是true.)
allowResize ? 指定选择区是否可以被重新指定大小(默认的值是true)
allowSelect ? 指定用户是否可以重新指定选择区(默认的值是true)
minSelect ? 一个新的选择区最小的大小(默认的大小是[0, 0])
outlineOpacity ? 轮廓的透明度(默认的值是0.5)
overlayOpacity ? 覆盖层的透明度(默认的值是0.5)
selectionPosition ? 选择区得位置(默认的是[0, 0])
selectionWidth ? 选择区得宽度(默认的值是0)
selectionHeight ? 选择区的长度(默认的值是0)
第五步:建立图像层

这一步我们将改变文档的结构,以此来为下一步做准备:插件的表面

基于jQuery的图片剪切插件

首先我们要初始化图像层,然后初始化化图像包含层
// 初始化图像层 
var $image = $(object); // 初始化一个图像支持层 
var $holder = $('<div />') 
.css({ 
position: 'relative' 
}) 
.width($image.width()) 
.height($image.height()); 
// imag包含在holder层里面 .wrap()函数 
$image.wrap($holder) 
.css({ 
position: 'absolute' 
});

正如你所见,包含层和图像具有同样的大小并且包含层和图像是相对定位。然后我们使用.wrap函数使得图像包含在其中

在图像的上面是覆盖层:

//初始化一个覆盖层,并将其置于图像之上 
var $overlay = $('<div id="image-crop-overlay" />') 
.css({ 
opacity: options.overlayOpacity, 
position: 'absolute' 
}) 
.width($image.width()) 
.height($image.height()) 
.insertAfter($image);

这个层同样和图像一样大,但是是绝对定位。我们从options.outlineOpacity得到透明度。这个元素拥有一个Id,所以我们可以改变通过插件的css来改变它的样式。在最后我们用.insertAfter($image)方法将覆盖层恰好放在图像层的下面。

下面一层是触犯器层

// 初始化一个触发器层,并将其放在覆盖层的上面 
var $trigger = $('<div />') 
.css({ 
backgroundColor: '#000000', 
opacity: 0, 
position: 'absolute' 
}) 
.width($image.width()) 
.height($image.height()) 
.insertAfter($overlay);

这一次对于用户来说是不可见的,但是它会处理一些事件。

接下来是边框层和选择层

// 初始化一个边框层,将其放在触发器层的上面 
var $outline = $('<div id="image-crop-outline" />') 
.css({ 
opacity: options.outlineOpacity, 
position: 'absolute' 
}) 
.insertAfter($trigger); // 初始化一个选择层,将其置于边框层的上面 
var $selection = $('<div />') 
.css({ 
background: 'url(' + $image.attr('src') + ') no-repeat', 
position: 'absolute' 
}) 
.insertAfter($outline);

.attr()方法是用来返回某个特定的属性的值,我们用它来得到图像的地址,并将其作为选择层的背景

绝对定位在相对定位里面

一个相对定位的元素可以控制绝对定位的元素,使得绝对定位的元素在相对定位的元素的里面。这也算为什么包含层是相对定位,而所有的它的子元素都是绝对定位

第六步:更新界面

首先我们要初始为一些全局变量

//初始化全局变量 
var selectionExists, 
selectionOffset = [0, 0], 
selectionOrigin = [0, 0];

selectionExists会告知我们是否存在着一个选择区域,selectionOffset会包含相对于起点的偏移量,selectionOrigin会包含选择区域的起点

下面的条件用于当插件被加载时选择区域就存在

//指示选择区域的大小是否比最小的大,然后再根据它来设定选择区域是否存在 
if (options.selectionWidth > options.minSelect[0] && 
options.selectionHeight > options.minSelect[1]) 
selectionExists = true; 
else 
selectionExists = false; 
现在我们将调用updateInterface来初始化插件的界面 
//第一次调用‘uploadInterface'函数来初始化插件的界面 
updateInterface();
Javascript 相关文章推荐
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
vue中SPA单页面应用程序详解
Nov 07 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 #Javascript
JavaScript 一道字符串分解的题目
Aug 03 #Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 #Javascript
JavaScript 大数据相加的问题
Aug 03 #Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 #Javascript
JS 控制小数位数的实现代码
Aug 02 #Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 #Javascript
You might like
在线竞拍系统的PHP实现框架(二)
2006/10/09 PHP
php获得文件扩展名三法
2006/11/25 PHP
php set_time_limit()函数的使用详解
2013/06/05 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
Javascript Objects详解
2014/09/04 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
python手写均值滤波
2020/02/19 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
公司JAVA开发面试题
2015/04/02 面试题
在校大学生的职业生涯规划书
2014/03/14 职场文书
交通工程专业推荐信
2014/09/06 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
2015年教师国培感言
2015/08/01 职场文书
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android