基于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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
js select常用操作控制代码
Mar 16 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
JS正则表达式验证中文字符
May 08 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 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
建立动态的WML站点(三)
2006/10/09 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
PHP加密解密函数详解
2015/10/28 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
JS实现吸顶特效
2020/01/08 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
Python计算字符宽度的方法
2016/06/14 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
计算机本科生自荐信
2013/10/15 职场文书
新春文艺演出主持词
2014/03/27 职场文书
幼儿教师求职信
2014/05/24 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
开服装店计划书
2014/08/15 职场文书
共青团员自我评价范文
2014/09/14 职场文书
2014年业务工作总结
2014/11/17 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
初中班主任工作随笔
2015/08/15 职场文书