asp.net 獨立Discuz頭像編輯模組分離打包_實用技巧

主要內容：

著作權聲明
頭像上傳和編輯的原理
獨立頭像上傳及編輯模組
一、著作權聲明
由於此模組核心均來自於Discuz NT，根據相關規定："禁止在 Discuz! / UCenter 的整體或任何部分基礎上以發展任何派生版本、修改版本或第三方版本用於重新分發。"
因此在開始下面的內容之前聲明如下：

本程式僅為個人學習研究，不以營利為目的，如若侵犯他人利益，請發送郵件KenshinCui@hotmail.com聯絡作者，本人獲得通知後立即刪除相關內容，其他第三方下載者或使用者在使用時注意其內容著作權歸北京康盛新創科技有限責任公司 所有。

二、頭像上傳和編輯的原理
在Discuz中頭像上傳和編輯主要通過flash來完成，它處理了包括檔案上傳和裁切的主要核心工作，但是我們這裡沒有.fla源檔案，只有.swf檔案，所以要弄清其原理就必須跟蹤相關的介面調用。

在此之前我們首先需要瞭解在Discuz中flash的頁面代碼是通過document.write動態產生的，其中的輸出的字串是通過調用AC_FL_RunContent()這個js方法（這個方法在common.js中）。它主要是產生相關falsh的html布局代碼，結構大致如下：

複製代碼 代碼如下:

<object width="540" height="253" id="mycamera" name="mycamera" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" >
<param name="scale" value="exactfit" />
<param name="movie" value="/images/common/camera.swf?nt=1&inajax=1&appid=67111770b37d9fc06c56e691c013b685&input=Jv5BQ48IKF4=&ucapi=http%3a%2f%2fkenshincui-pc%3a305%2ftools%2fajax.aspx" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />
<param name="menu" value="false" />
<param name="swLiveConnect" value="true" />
<param name="allowScriptAccess" value="always" />
</object>

在上面的代碼中最重要的就是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添加如下配置：

複製代碼 代碼如下:

<add key="ImagePath" value="images"/><!--圖片存放的相對路徑-->
<add key ="TempFilePath" value="images/upload"/><!--上傳的臨時檔案路徑-->
<add key="ImageSize" value="all"/><!--圖片大小，支援三種，分別是large、medium、small，如果使用三種則配置為all-->

當然其中的圖片路徑即產生的照片路徑都可以根據情況修改的。
在使用過程中只需要調用photoEdit.js中的SetPhotoName()傳遞圖片名稱即可（可以通過後兩個參數設定flash存放路徑和Ajax.aspx地址）：

複製代碼 代碼如下:

<script type="text/javascript" language="javascript">
SetPhotoName("YukoOgura");
</script>

另外SetPhotoName()方法還有兩個選擇性參數，那就是flash檔案的路徑和處理上傳和裁切的Ajax.aspx路徑，換句話說這兩個路徑也是可以隨意放的。

下面看看實際效果（通過"拍攝照片"的方式上傳和編輯照片的截圖比較類似就不再截圖了）：

上傳一張照片：

執行裁切操作：

裁切後產生三種尺寸的圖片：

打包下載