基于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 相关文章推荐
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
js字符编码函数区别分析
Jun 05 Javascript
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
原生js实现下拉框选择组件
Jan 20 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 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
介绍Python的Django框架中的QuerySets
2015/04/20 Python
python连接mysql实例分享
2016/10/09 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
Series和DataFrame使用简单入门
2019/11/13 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
银行实习自我鉴定
2013/10/12 职场文书
食品流通安全承诺书
2014/05/22 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
大学学生会辞职信
2015/05/13 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android