asp.net 独立Discuz头像编辑模块分离打包(2)-木庄网络博客

然后我们执行裁切：

从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添加如下配置：

代码如下:

<add key="ImagePath" value="images"/>
<add key ="TempFilePath" value="images/upload"/>
<add key="ImageSize" value="all"/>

当然其中的图片路径即生成的照片路径都可以根据情况修改的。
在使用过程中只需要调用photoEdit.js中的SetPhotoName()传递图片名称即可（可以通过后两个参数设置flash存放路径和Ajax.aspx地址）：

代码如下:

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

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

上传一张照片：

执行裁切操作：

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

打包下载

更多相关Discuz论坛的内容来自木庄网络博客

标签：Discuz论坛

返回前面的内容