摘要:在Discuz产品系列(包括UCenter、UCHome)中有一个flash头像上传编辑的功能比较好用,和之前自己用js实现的照片在线编辑插件比较像,于是想将它独立出来,一方面可以学习研究,另一方面有机会可以在项目中使用(这里主要是指Asp.Net程序,php的与之类似)。
主要内容:
- 版权声明
- 头像上传和编辑的原理
- 独立头像上传及编辑模块
一、版权声明
由于此模块核心均来自于Discuz NT,根据相关规定:"禁止在 Discuz! / UCenter 的整体或任何部分基础上以发展任何派生版本、修改版本或第三方版本用于重新分发。"
因此在开始下面的内容之前声明如下:
本程序仅为个人学习研究,不以营利为目的,如若侵犯他人利益,请发送邮件KenshinCui@hotmail.com联系作者,本人获得通知后立即删除相关内容,其他第三方下载者或使用者在使用时注意其内容版权归北京康盛新创科技有限责任公司所有。
二、头像上传和编辑的原理
在Discuz中头像上传和编辑主要通过flash来完成,它处理了包括文件上传和裁切的主要核心工作,但是我们这里没有.fla源文件,只有.swf文件,所以要弄清其原理就必须跟踪相关的接口调用。
在此之前我们首先需要了解在Discuz中flash的页面代码是通过document.write动态生成的,其中的输出的字符串是通过调用AC_FL_RunContent()这个js方法(这个方法在common.js中)。它主要是生成相关falsh的html布局代码,结构大致如下:
在上面的代码中最重要的就是movie参数,它定义了头像名称、裁切上传api路径以及flash所在路径等。
有了这些信息之后我们只需要了解相关接口调用接口,这时我们可以打开fiddler进行跟踪:
在首次到达头像修改界面的时候访问了/images/common/camera.swf?nt=1&inajax=1&appid=1036681732c9187901d4693bf1ab8416&input=DCdSBXIA4rY=&ucapi=http%3a%2f%2f192.168.1.92%3a312%2ftools%2fajax.aspx
这就是上面我们说的movie参数的值,由于像input(后面我们会发现它就是头像图片的名称)等信息需要是动态设定的,所以Discuz设计的时候采用动态生成js的方法。
接着我们上传一张照片:
从跟踪可以看到访问路径/tools/ajax.aspx?m=user&inajax=1&a=uploadavatar&appid=1036681732c9187901d4693bf1ab8416&input=DCdSBXIA4rY%3D&agent=null&avatartype=null,它是主要负责处理照片上传的,其中的a参数告诉ajax.aspx执行何种操作(事实上后面我们会发现a为uploadavatar则执行上传操作),input参数同上面一样,是头像图片的名称。
然后我们执行裁切:
从Fiddler中我们可以看到请求路径为/tools/ajax.aspx?m=user&inajax=1&a=rectavatar&appid=1036681732c9187901d4693bf1ab8416&input=DCdSBXIA4rY%3D&agent=null&avatartype=null,这是a参数变成了rectavatar,其他信息基本和上一步操作一致,经过分析我们可以看到这一步对应的是裁切保存操作。
有了上面的分析我们可以大概了解到在Discuz中整个头像上传及编辑功能大概的原理,我们发现在代码实现部分主要就是ajax.aspx这个页面,因此我们可以打开这个页面对其进行修改去掉同Discuz自身业务无关的东西,形成一个独立的小组件。
三、独立头像上传及编辑模块
有了上面的分析之后我们要独立上传模块并不太难。首先我们可以将ajax.aspx独立出来去掉其中和具体业务有关的代码,只保留上传和保存操作,并将其路径设计为可配置的。其次我们可以将动态生成flash布局代码的方式改为静态的,因为对我们来说其他参数都不重要,重要的就是图片保存名称而已,这个过程中我们经过加工可以将其网络路径设置为动态获取的(原来Discuz中是在安装过之后设置死的)。最后我们将flash其相关文件拷贝到项目中就可以了,这其中除了.swf文件还有多国原因包用到的locale.xml,以及本地跨域文件crossdomain.xml。
OK,说了那么多下面看看我们独立出来的模块如何使用吧。
首先这个独立头像编辑模块目录结构如下:
使用时只需要拷贝bin中的PhotoEditor.dll拷贝到站点bin目录中;将crossdomin.Js、Ajax.aspx、photoEdit.htm、js目录、images目录放到站点根目录中,然后在Web.config添加如下配置:
当然其中的图片路径即生成的照片路径都可以根据情况修改的。
在使用过程中只需要调用photoEdit.js中的SetPhotoName()传递图片名称即可(可以通过后两个参数设置flash存放路径和Ajax.aspx地址):
另外SetPhotoName()方法还有两个可选参数,那就是flash文件的路径和处理上传和裁切的Ajax.aspx路径,换句话说这两个路径也是可以随意放的。
下面看看实际效果(通过"拍摄照片"的方式上传和编辑照片的截图比较类似就不再截图了):
上传一张照片:
执行裁切操作:
裁切后生成三种尺寸的图片:
OK,今天就到这里吧!模块下载:
分享到:
相关推荐
在Discuz产品系列(包括UCenter、UCHome)中有一个flash头像上传编辑的功能比较好用,和之前自己用js实现的照片在线编辑插件比较像,于是想将它独立出来,一方面可以学习研究,另一方面有机会可以在项目中使用(这里...
discuz如何编辑模块,以文章模块为例说明.pdf
discuz 发布模块 不用登陆 亲测
discuz论坛插件DZ插件 头像装饰 .
javascript 仿Discuz头像信息提示效果! javascript 仿Discuz头像信息提示效果!
discuz,门户 模块
Discuz!资源下载之各类头像库打包下载共计4445张,超级多!
discuz论坛插件DZ插件 品牌123-商讯模块 商讯模块 1.005 X3支持
discuz的头像上传插件很好用 这里将它单独抠出来改成java版本 插件使用的是camera.swf,可以自行上传图片也可以调用摄像头,上传之后可以改变大小,最终生成大中小三个图片文件 附上一个简单的例子,需要的lib包也...
仿Discuz的头像提示效果,鼠标放头像上,会出现此头像的用户信息,比如用户ID、金钱、威望等,使用了一个封装的JS类,可设置Tip样式,offset参数修正,移入Tip对象时保持显示状态,这里要注意,如果是外部元素进入,...
帖子列表页显示头像 本插件无需修改文件一键开关帖子列表页中的头像显示。 实现方法: 选“是”为帖子列表显示头像; 头像的动态/静态调用方式取决于“后台 =》 站长 =》 UCenter 设置” 里的设置; 鼠标滑过...
帖子页面显示作者头像(左侧版)插件for discuz 7.0
仿discuz头像上传,实现大中小三种头像图片。二次应用简单..需要的可以下载啦
discuz头像上传,对discuz拆出来的,可以放在自己网站使用,跟discuz上的功能一样
这是一个简单的仿discuz、discuzx的编辑器,可以把现有相册中的图片直接插入到编辑器中,图片和附件上传采用swfupload批量上传图片方式,比一般的编辑器更强大,他与现有数据库很好的结合在一起,此编辑器是本人从...
帖子列表显示作者头像插件for Discuz! 7.2 GBK UTF8 BIG5 演示图:
discuz论坛插件DZ插件 品牌123-视频模块1.0 .
discuz 7.0 会员未上传头像则显示随机头像插件 插件简介:修改UCenter头像调用,未上传头像会员则显示随机头像 适合UC1.5所有应用(ss/dz/uchome) 并非严格意义上的原创,而是借鉴了以前折翼の天使♂的随机头像...