基于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） 第五步：建立图像层 这一步我们将改变文档的结构，以此来为下一步做准备：插件的表面
复制代码 代码如下: // 初始化图像层 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(); |
