基于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();
相关推荐
-
Jquery ajaxsubmit上传图片实现代码
而且未建立统一上传函数.于是将代码改造了.心想来个ajax异步上传图片吧,这技术应该很老套了.于是直接打开强大的cnblogs轻松的找到了 这篇文章 直接依葫芦画瓢,将该作者的劳动成果直接"拿来主义了".很快就把代码全改造了.可是当我把程序发布到服务器上的时问题来了.上传文件失效了!汗- 都是偷懒造成的恶果.继续打开先前参考的那篇文章.原来作者解释了只能在本地使用而不能发布到服务器上.心想我难道还得用 iframe + http post 这个 郁闷的方式么?? 于是不甘心的我打开了更
-
php+flash+jQuery多图片上传源码分享
flash+php多图片上传的源码,测试成功,一个经典的上传源码,为什么要用flash作为上传的组件呢,其实这里不仅仅是flash,另加了jquery的技术,这样做的目的是为了更好更方便的管理图片,使用过QQ空间进行上传图片的童鞋都知道,QQ空间的上传体验度很好,而且管理我们上传的图片非常的方便,使用的技术基本上就是flash与jquery技术了. flash+jquery是作为前端图片上传展示的,还需要与php的结合才能将图片上传到指定的目标,这里的php一共有两个文件,一个upload.ph
-
jQuery Ajax文件上传(php)
如何实现jQuery的Ajax文件上传,PHP如实文件上传.AJAX上传文件,PHP上传文件. [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上传处理函数来处理上传的文件.而处理函数一般都是用PHP,JSP,ASP等服务端语言来实现的.那么如何通过WEB(HTTP协议来上传文件呢?)你需要类似于以下的HTML代码:test.html 复制代码 代
-
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
本文实例讲述了jQuery模拟实现经典FLASH导航动画效果的方法.分享给大家供大家参考,具体如下: 一.前言: FLASH在中国互联网发展初期的时候非常的热,各种各样的矢量造型和动作,加上专门配制的音效,让很多人眼前一亮,并且让很多人迷上了这种新兴的媒体,那时候兴起了很多大大小小的专门发布FLASH的网站,印象中记得的像"FLASH闪吧"."FLASH帝国"."闪客天地"等这些都是很火很热的网站,在当时盛极一时,由此也产生了一大批的专门从事FL
-
Jquery插件之多图片异步上传
1.初始化上传控件数量. 复制代码 代码如下: $(document).ready(function() { $('#H_File').uploadFile({ key: 'test',count:3 }); }); 以前的设计思想是,初始化上传控件数量,页面显示为1个上传控件,每当上传成功后,在下面创建一个上传控件. 2.上传图片成功后 这就是最终的效果,如果您有更好的插件,希望一起开源. 其他的就不多说了,如果您感兴趣,点击下载源码 /201010/yuanma/jquery_aspnet_
-
JQuery上传插件Uploadify使用详解及错误处理
什么是Uploadify Uploadify是JQuery的一个上传插件,支持多文件上传,实现的效果非常不错,带进度显示. 官网提供的是PHP的DEMO,在这里我详细介绍在Asp.net下的使用. 下载 官方下载 官方文档 官方演示 我们提供的Uploadify下载地址 如何使用 1 创建Web项目,命名为JQueryUploadDemo,从官网上下载最新的版本解压后添加到项目中 2 在项目中添加UploadHandler.ashx文件用来处理文件的上传. 3 在项目中添加UploadFile文
-
jQuery实现模拟flash头像裁切上传功能示例
本文实例讲述了jQuery实现模拟flash头像裁切上传功能.分享给大家供大家参考,具体如下: 是的,jq已经有类似的插件了,或者干脆用flash算了,为什么我还要自己写?因为造(wo)轮(bu)子(hui)也(flash)是一个学习的过程,轮子不会造,将来怎么造飞机?先来一张最终效果图: 一.大概思路 用js来做这个效果,先得将图片A上传到服务器,关于异步上传的插件有很多,不用插件也可以参考本人上一篇博客用纯js的方式上传,上传之后显示到页面里,由于上传的图片尺寸各不相同,要完整地显示图片,就
-
jquery+easeing实现仿flash的载入动画
去年面试过一家做网站的 公司,看了一下他们的案例,看懂一个蛮有意思的 ,一个房地产的官网,是用flash做的.感觉不错. 于是,闲暇之际,简单的jquery 模仿做了一下.下面是我的效果图.脚本也没啥优化,流畅度也没有flash流畅.但是重要的是看到这个flash,想到 如何实现它效果的思路,非常适合新手. 观察上诉,首先左侧是个载入动画, 复制代码 代码如下: $('.left').find('ul').delay(90).animate({left:0},700,'easeOutSine',
-
jQuery实现Flash效果上下翻动的中英文导航菜单代码
本文实例讲述了jQuery实现Flash效果上下翻动的中英文导航菜单代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现Flash效果鼠标感应式的翻动导航菜单,支持中英文切换,所使用的jQuery类库版本为1.3.2. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-flash-style-sx-cha-chen-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//
-
PHP结合JQueryJcrop实现图片裁切实例详解
我们经常可以看到一些网站上有图片剪切的功能,或许你会觉得这一功能炫目华丽,神秘莫测!但是今天介绍的一款专用于图片裁切的插件jquery.Jcrop.min.js就将揭开图片剪切的神秘面纱.使用这个插件可以很方便的实现这一功能,使用时仅需鼠标在图片上圈选出选区,即可把图片裁切成所选部分,非常适合用于头像的裁切编辑功能. 本实例演示分为HTML和php两部分: 第一部分,HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio
-
基于jQuery的仿flash的广告轮播代码
整个页面如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T
-
jquery imgareaselect 使用利用js与程序结合实现图片剪切
复制代码 代码如下: /* 缺陷,当前在ff3下,用jquery的 width()与height()函数,在不设置图片的宽度与高度的时候,不能取到 需要在图片load函数里面初始化才可以 */ sanshi_imgareaselect = function(pic_id,view_div_id){ this.pic_obj = jQuery("#"+pic_id); this.pic_width; this.pic_height; this.view_d