Discuz教程网

1314学习网»站长论坛 › 站长交流区 › 技术杂谈 › 基于jQuery的图片剪切插件
返回列表 发新帖

基于jQuery的图片剪切插件

[复制链接]
authicon dly 发表于 2011-9-14 08:26:16 | 显示全部楼层 |阅读模式
第一步：建立工作区间

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


  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <title></title>
  6. <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
  7. <link href="resources/css/style.css" rel="stylesheet" type="text/css" />
  8. <link href="resources/js/imageCrop/jquery.imagecrop.css" rel="stylesheet" type="text/css" />
  9. <script src="resources/js/imageCrop/jquery.imagecrop.js" type="text/javascript"></script>
  10. </head>
  11. <body>
  12. <form id="form1" runat="server">
  13. <div id="wrapper">
  14. <h1>
  15. Jquery Image Croping plug-in</h1>
  16. <div class="image-decorator">
  17. <img alt="Jquery Image Croping plug-in" height="360px" id="example" src="resources/images/example.JPG"
  18. width="480" /></div><!--图片修饰层-->
  19. </div><!--#包裹层 -->
  20. </form>
  21. </body>
  22. </html>
复制代码

style.css
  1. * {
  2. margin : 0;
  3. outline : 0;
  4. padding : 0;
  5. }
  6. /*初始化网页样式*/
  7. body {
  8. background-color : #ededed;
  9. color : #646464;
  10. font-family : 'Verdana', 'Geneva', sans-serif;
  11. font-size : 12px;
  12. text-shadow : 0 1px 0 #ffffff;
  13. }
  14. h1 {
  15. font-size : 24px;
  16. font-weight : normal;
  17. margin : 0 0 10px 0;
  18. }
  19. div#wrapper {
  20. margin : 25px 25px 25px 25px;
  21. }
  22. /*选择id为wrapper的div*/
  23. div.image-decorator {
  24. -moz-border-radius : 5px 5px 5px 5px;/*针对火狐的浏览器的盒子的锐化*/
  25. -moz-box-shadow : 0 0 6px #c8c8c8;/*针对火狐的浏览器的盒子的边框阴影处理*/
  26. -webkit-border-radius : 5px 5px 5px 5px;/*WebKit 是一个开源的浏览器引擎*/
  27. -webkit-box-shadow : 0 0 6px #c8c8c8;
  28. background-color : #ffffff;
  29. border : 1px solid #c8c8c8;
  30. border-radius : 5px 5px 5px 5px;
  31. box-shadow : 0 0 6px #c8c8c8;
  32. display : inline-block;/*将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。支持的浏览器有：Opera、Safari*/
  33. height : 360px;
  34. padding : 5px 5px 5px 5px;
  35. width : 480px;
  36. }
复制代码

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

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

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

通过可以定制的选择，使得对用户来说有了更多的选择以及使插件更加具有灵活性。（备注：以下代码均按照顺序来的）
  1. //将插件的选项封装在一个常量对象中，远远好于传递一长串参数来传递。
  2. //这样使得可以在插件默认的情况下进行扩展
  3. var defaultOptions = {
  4. allowMove: true,
  5. allowResize: true,
  6. allowSelect: true,
  7. minSelect: [0, 0],
  8. outlineOpacity: 0.5,
  9. overlayOpacity: 0.5,
  10. selectionPosition: [0, 0],
  11. selectionWidth: 0,
  12. selectionHeight: 0
  13. };

  15. // 将选项设为默认选项
  16. var options = defaultOptions;

  18. // 然后将其和客户定制的选项合并
  19. setOptions(customOptions);
复制代码

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

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

选项

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

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

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

首先我们要初始化图像层，然后初始化化图像包含层
  1. // 初始化图像层
  2. var $image = $(object);

  4. // 初始化一个图像支持层
  5. var $holder = $('<div />')
  6. .css({
  7. position: 'relative'
  8. })
  9. .width($image.width())
  10. .height($image.height());

  12. // imag包含在holder层里面 .wrap()函数

  14. $image.wrap($holder)
  15. .css({
  16. position: 'absolute'
  17. });
复制代码

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

在图像的上面是覆盖层：
  1. //初始化一个覆盖层，并将其置于图像之上
  2. var $overlay = $('<div id="image-crop-overlay" />')
  3. .css({
  4. opacity: options.overlayOpacity,
  5. position: 'absolute'
  6. })
  7. .width($image.width())
  8. .height($image.height())
  9. .insertAfter($image);
复制代码

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

下面一层是触犯器层
  1. // 初始化一个触发器层，并将其放在覆盖层的上面
  2. var $trigger = $('<div />')
  3. .css({
  4. backgroundColor: '#000000',
  5. opacity: 0,
  6. position: 'absolute'
  7. })
  8. .width($image.width())
  9. .height($image.height())
  10. .insertAfter($overlay);
复制代码

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

接下来是边框层和选择层
  1. // 初始化一个边框层，将其放在触发器层的上面
  2. var $outline = $('<div id="image-crop-outline" />')
  3. .css({
  4. opacity: options.outlineOpacity,
  5. position: 'absolute'
  6. })
  7. .insertAfter($trigger);

  9. // 初始化一个选择层，将其置于边框层的上面
  10. var $selection = $('<div />')
  11. .css({
  12. background: 'url(' + $image.attr('src') + ') no-repeat',
  13. position: 'absolute'
  14. })
  15. .insertAfter($outline);
复制代码

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

绝对定位在相对定位里面

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

第六步：更新界面

　　　　　　首先我们要初始为一些全局变量
  1. //初始化全局变量
  2. var selectionExists,
  3. selectionOffset = [0, 0],
  4. selectionOrigin = [0, 0];
复制代码

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

下面的条件用于当插件被加载时选择区域就存在
  1. //指示选择区域的大小是否比最小的大，然后再根据它来设定选择区域是否存在
  2. if (options.selectionWidth > options.minSelect[0] &&
  3. options.selectionHeight > options.minSelect[1])
  4. selectionExists = true;
  5. else
  6. selectionExists = false;
  7. 　　现在我们将调用updateInterface来初始化插件的界面

  9. //第一次调用‘uploadInterface'函数来初始化插件的界面
  10. updateInterface();
复制代码
插件

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？立即注册

x



上一篇：jquery里的正则表达式说明
下一篇：jQuery + Flex 通过拖拽方式动态改变图片的代码

相关帖子
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2025-5-2 20:07

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表