asp.net 独立Discuz头像编辑模块分离打包

在Discuz产品系列（包括UCenter、UCHome）中，存在一个特别实用的功能——flash头像上传编辑功能。这一功能让人想起了作者之前通过js实现的照片在线编辑插件。出于学习和研究的目的，作者想将其独立出来，并有机会在Asp.Net程序中进行应用（php用户也可借鉴）。

一、版权声明

此模块的核心源自Discuz NT。根据相关规定，禁止在Discuz!或UCenter的基础上发展任何派生版本、修改版本或第三方版本用于重新分发。在此，本人郑重声明，本程序仅作为个人学习研究之用，非以营利为目的。若侵犯他人利益，请通过邮件联系作者KenshinCui@hotmail。com，获得通知后，本人将立即删除相关内容。此程序版权归北京康盛新创科技有限责任公司所有。

二、头像上传和编辑的原理

在Discuz中，头像的上传和编辑主要通过flash完成，其处理了文件上传和裁切的核心工作。我们手头的资源只有.swf文件，要了解其原理就必须跟踪相关的接口调用。

在Discuz中，flash的页面代码是通过document.write动态生成的。其中的输出的字符串是通过调用AC_FL_RunContent()这个js方法（该方法位于mon.js中）。此方法主要负责生成相关的flash html布局代码，结构大致如下：

复制的代码片段如下：

```html

```

在这段代码中，最重要的是movie参数。它定义了头像名称、裁切上传的api路径以及flash文件的路径。为了了解相关接口调用，我们需要关注这个参数，并通过fiddler进行跟踪。当访问头像修改界面时，会访问到一个特定的.swf文件，其中的movie参数包含了头像图片的名称以及相关的api路径。由于这些信息需要动态设定，Discuz在设计时采用了动态生成js的方法。

上传照片的神秘旅程

一探网页深处，我们会发现每个网站都有隐藏在角落的交互奥秘。当我们想要上传一张照片时，浏览路径便会引领我们穿越未知的网页领域。以Discuz论坛为例，我们的之旅从访问路径开始。在浏览器的地址栏中输入一串字符，像是神秘的密码，引领我们进入图片上传的大门。这个路径是/tools/ajax.aspx，其中参数m表示模块，a表示操作类型。当a参数值为uploadavatar时，便意味着我们正在执行上传操作。另一个关键参数input则告诉我们图片的名称。这些参数犹如通往秘密之门的钥匙，控制着我们的操作权限。接下来我们来了解一下整个头像上传及编辑功能的原理。整个功能的核心代码位于ajax.aspx页面。我们可以将其独立出来，形成一个独立的小组件。这个组件可以独立于Discuz论坛的业务逻辑运行，为我们提供便捷的头像上传和编辑功能。去掉与具体业务相关的代码后，这个组件可以被配置为任何网站提供头像编辑服务。只需要将相关的文件复制到站点目录中，然后在Web.config中添加必要的配置信息即可。配置完成后，只需调用SetPhotoName()方法并传递图片名称即可开始上传和编辑照片。SetPhotoName()方法还接受两个可选参数：flash文件的路径和处理上传和裁切的Ajax.aspx路径。这意味着我们可以根据需求自由放置这些文件路径。现在让我们来看看实际效果吧！通过拍摄照片的方式上传并编辑照片非常简单便捷，整个过程截图如下（这里就不再重复截图了）。首先上传一张照片，然后进行裁切操作。裁切完成后，我们会得到三种尺寸的图片供我们选择使用。这个独立头像编辑模块的使用非常灵活方便，只需简单的配置和调用即可为我们的网站提供强大的头像编辑功能。无论是个人网站还是商业应用，都可以轻松集成这个模块，为用户提供更好的体验。这样我们就可以轻松实现狼蚁网站SEO优化的目标了！