快捷導(dǎo)航

asp.net 獨立Discuz頭像編輯模塊分離打包

更新時間：2011年06月09日 23:07:28 作者：

在Discuz產(chǎn)品系列（包括UCenter、UCHome）中有一個flash頭像上傳編輯的功能比較好用，和之前自己用js實現(xiàn)的照片在線編輯插件比較像，于是想將它獨立出來，一方面可以學(xué)習(xí)研究，另一方面有機會可以在項目中使用（這里主要是指Asp.Net程序,php的與之類似）。

主要內(nèi)容：

版權(quán)聲明
頭像上傳和編輯的原理
獨立頭像上傳及編輯模塊
一、版權(quán)聲明
由于此模塊核心均來自于Discuz NT，根據(jù)相關(guān)規(guī)定："禁止在 Discuz! / UCenter 的整體或任何部分基礎(chǔ)上以發(fā)展任何派生版本、修改版本或第三方版本用于重新分發(fā)。"
因此在開始下面的內(nèi)容之前聲明如下：

本程序僅為個人學(xué)習(xí)研究，不以營利為目的，如若侵犯他人利益，請發(fā)送郵件KenshinCui@hotmail.com聯(lián)系作者，本人獲得通知后立即刪除相關(guān)內(nèi)容，其他第三方下載者或使用者在使用時注意其內(nèi)容版權(quán)歸北京康盛新創(chuàng)科技有限責(zé)任公司所有。

二、頭像上傳和編輯的原理
在Discuz中頭像上傳和編輯主要通過flash來完成，它處理了包括文件上傳和裁切的主要核心工作，但是我們這里沒有.fla源文件，只有.swf文件，所以要弄清其原理就必須跟蹤相關(guān)的接口調(diào)用。

在此之前我們首先需要了解在Discuz中flash的頁面代碼是通過document.write動態(tài)生成的，其中的輸出的字符串是通過調(diào)用AC_FL_RunContent()這個js方法（這個方法在common.js中）。它主要是生成相關(guān)falsh的html布局代碼，結(jié)構(gòu)大致如下：

復(fù)制代碼代碼如下:

在上面的代碼中最重要的就是movie參數(shù)，它定義了頭像名稱、裁切上傳api路徑以及flash所在路徑等。
有了這些信息之后我們只需要了解相關(guān)接口調(diào)用接口，這時我們可以打開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參數(shù)的值，由于像input（后面我們會發(fā)現(xiàn)它就是頭像圖片的名稱）等信息需要是動態(tài)設(shè)定的，所以Discuz設(shè)計的時候采用動態(tài)生成js的方法。

接著我們上傳一張照片：

fiddler2

從跟蹤可以看到訪問路徑/tools/ajax.aspx?m=user&inajax=1&a=uploadavatar&appid=1036681732c9187901d4693bf1ab8416&input=DCdSBXIA4rY%3D&agent=null&avatartype=null，它是主要負責(zé)處理照片上傳的，其中的a參數(shù)告訴ajax.aspx執(zhí)行何種操作（事實上后面我們會發(fā)現(xiàn)a為uploadavatar則執(zhí)行上傳操作），input參數(shù)同上面一樣，是頭像圖片的名稱。

然后我們執(zhí)行裁切：

fiddler3

從Fiddler中我們可以看到請求路徑為/tools/ajax.aspx?m=user&inajax=1&a=rectavatar&appid=1036681732c9187901d4693bf1ab8416&input=DCdSBXIA4rY%3D&agent=null&avatartype=null，這是a參數(shù)變成了rectavatar，其他信息基本和上一步操作一致，經(jīng)過分析我們可以看到這一步對應(yīng)的是裁切保存操作。

有了上面的分析我們可以大概了解到在Discuz中整個頭像上傳及編輯功能大概的原理，我們發(fā)現(xiàn)在代碼實現(xiàn)部分主要就是ajax.aspx這個頁面，因此我們可以打開這個頁面對其進行修改去掉同Discuz自身業(yè)務(wù)無關(guān)的東西，形成一個獨立的小組件。

三、獨立頭像上傳及編輯模塊

有了上面的分析之后我們要獨立上傳模塊并不太難。首先我們可以將ajax.aspx獨立出來去掉其中和具體業(yè)務(wù)有關(guān)的代碼，只保留上傳和保存操作，并將其路徑設(shè)計為可配置的。其次我們可以將動態(tài)生成flash布局代碼的方式改為靜態(tài)的，因為對我們來說其他參數(shù)都不重要，重要的就是圖片保存名稱而已，這個過程中我們經(jīng)過加工可以將其網(wǎng)絡(luò)路徑設(shè)置為動態(tài)獲取的（原來Discuz中是在安裝過之后設(shè)置死的）。最后我們將flash其相關(guān)文件拷貝到項目中就可以了，這其中除了.swf文件還有多國原因包用到的locale.xml，以及本地跨域文件crossdomain.xml。

OK，說了那么多下面看看我們獨立出來的模塊如何使用吧。

首先這個獨立頭像編輯模塊目錄結(jié)構(gòu)如下：