摘要：在discuz産品系列（包括ucenter、uchome）中有一個flash頭像上傳編輯的功能比較好用，和之前自己用js實作的照片線上編輯插件比較像，于是想将它獨立出來，一方面可以學習研究，另一方面有機會可以在項目中使用（這裡主要是指asp.net程式,php的與之類似）。
主要内容：
版權聲明
頭像上傳和編輯的原理
獨立頭像上傳及編輯子產品
由于此子產品核心均來自于discuz nt，根據相關規定："禁止在 discuz! / ucenter的整體或任何部分基礎上以發展任何派生版本、修改版本或第三方版本用于重新分發。"
是以在開始下面的内容之前聲明如下：
在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路徑，換句話說這兩個路徑也是可以随意放的。
下面看看實際效果（通過"拍攝照片"的方式上傳和編輯照片的截圖比較類似就不再截圖了）：
上傳一張照片：
執行裁切操作：
裁切後生成三種尺寸的圖檔：