独立Discuz头像编辑模块

痛定思痛。 2022-05-15 06:29 275阅读 0赞

摘要：在Discuz产品系列（包括UCenter、UCHome）中有一个flash头像上传编辑的功能比较好用，和之前自己用js实现的照片在线编辑插件比较像，于是想将它独立出来，一方面可以学习研究，另一方面有机会可以在项目中使用（这里主要是指Asp.Net程序,php的与之类似）。

**主要内容：**

1.  版权声明
2.  头像上传和编辑的原理
3.  独立头像上传及编辑模块

由于此模块核心均来自于Discuz NT，根据相关规定："**禁止在 Discuz! / UCenter 的整体或任何部分基础上以发展任何派生版本、修改版本或第三方版本用于重新分发。**"  
因此在开始下面的内容之前声明如下：

本程序仅为个人学习研究，不以营利为目的，如若侵犯他人利益，[请发送邮件KenshinCui@hotmail.com][KenshinCui_hotmail.com]联系作者，本人获得通知后立即删除相关内容，其他第三方下载者或使用者在使用时注意其内容版权归[北京康盛新创科技有限责任公司][Link 1]所有。

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

在Discuz中头像上传和编辑主要通过flash来完成，它处理了包括文件上传和裁切的主要核心工作，但是我们这里没有.fla源文件，只有.swf文件，所以要弄清其原理就必须跟踪相关的接口调用。

在此之前我们首先需要了解在Discuz中flash的页面代码是通过document.write动态生成的，其中的输出的字符串是通过调用AC\_FL\_RunContent()这个js方法（这个方法在common.js中）。它主要是生成相关falsh的html布局代码，结构大致如下：

在上面的代码中最重要的就是movie参数，它定义了头像名称、裁切上传api路径以及flash所在路径等。

有了这些信息之后我们只需要了解相关接口调用接口，这时我们可以打开fiddler进行跟踪：

![fiddler1][]

在首次到达头像修改界面的时候访问了/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的方法。

接着我们上传一张照片：

![fiddler2][]

从跟踪可以看到访问路径/tools/ajax.aspx?m=user&inajax=1&a=uploadavatar&appid=1036681732c9187901d4693bf1ab8416&input=DCdSBXIA4rY%3D&agent=null&avatartype=null，它是主要负责处理照片上传的，其中的a参数告诉ajax.aspx执行何种操作（事实上后面我们会发现a为uploadavatar则执行上传操作），input参数同上面一样，是头像图片的名称。

然后我们执行裁切：

![fiddler3][]

从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，说了那么多下面看看我们独立出来的模块如何使用吧。

首先这个独立头像编辑模块目录结构如下：

![directory][]

使用时只需要拷贝bin中的PhotoEditor.dll拷贝到站点bin目录中；将crossdomin.Js、Ajax.aspx、photoEdit.htm、js目录、images目录放到站点根目录中，然后在Web.config添加如下配置：

当然其中的图片路径即生成的照片路径都可以根据情况修改的。

在使用过程中只需要调用photoEdit.js中的SetPhotoName()传递图片名称即可（可以通过后两个参数设置flash存放路径和Ajax.aspx地址）：

<mce:script type="text/javascript" language="javascript"></mce:script>

另外SetPhotoName()方法还有两个可选参数，那就是flash文件的路径和处理上传和裁切的Ajax.aspx路径，换句话说这两个路径也是可以随意放的。

下面看看实际效果（通过"拍摄照片"的方式上传和编辑照片的截图比较类似就不再截图了）：

上传一张照片：

![upload][]

执行裁切操作：

![cut][]

裁切后生成三种尺寸的图片：

![complted][]

OK，今天就到这里吧！模块下载： [![download][]][download 1]

<table> 
 <tbody> 
  <tr style="vertical-align:top;"> 
   <td> <a href="http://creativecommons.org/licenses/by/2.5/cn/" rel="nofollow"><img style="border-width:0;" src="http://i.creativecommons.org/l/by/2.5/cn/88x31.png" alt="知识共享许可协议"></a> </td> 
   <td> 本作品采用<a href="http://creativecommons.org/licenses/by/2.5/cn/" rel="nofollow">知识共享署名 2.5 中国大陆许可协议</a>进行许可，欢迎转载，演绎或用于商业目的。但转载请注明来自<a href="http://blog.csdn.net/jianxin160" rel="nofollow">崔江涛（KenshinCui）</a>，并包含相关链接。 </td> 
  </tr> 
 </tbody> 
</table>

[KenshinCui_hotmail.com]: mailto:%E8%AF%B7%E5%8F%91%E9%80%81%E9%82%AE%E4%BB%B6KenshinCui@hotmail.com
[Link 1]: http://www.comsenz.com/products/discuz
[fiddler1]: /images/20220515/194b14036eac4b77893f379e1f8bc0b5.png
[fiddler2]: /images/20220515/35326a517e5847b4b05e2debf7414523.png
[fiddler3]: /images/20220515/eec5e5fc13374bd8b9151c0a101826c8.png
[directory]: /images/20220515/4fb879610e5a4cd29a4f4588324f649e.png
[upload]: /images/20220515/e2b79cbd70b842938a7e865b526fa5a0.png
[cut]: /images/20220515/13ec2b053c3b4ef38256e2137bb62531.png
[complted]: /images/20220515/f32a878253064c9c8781561d89b3a0ab.png
[download]: /images/20220515/0471fa853770463da0becb73e8298ecc.png
[download 1]: http://cid-e7bd5e8882a6a2da.office.live.com/self.aspx/BlogFile/PhotoEdit.zip