Discuz功能改進-用html5實現頭像編輯&上傳

 基於Flash即將停用，我相信頭像上傳替換成html5的功能是非常必要的。
若是有不會修改的地方，這邊我建議直接在Disczu應用中心購買插件唷!





※本人只翻譯成繁體中文，並修正部分文句讓臺灣這邊Discuz站長可以看更清楚，可能在修正文句上並不完美，請見諒。

※本文經過天香老師同意轉載並修正文句，若要再轉載修正文句，請先經過原作者同意，尊重原作者，原作者保留修改及調整權利。


現有的Discuz頭像編輯&上傳功能是基於Flash組件呈現的，網友 aikato問如何利用html5替代呢?接下來本文就台討論一下這個問題。
我們用了html5的畫布（canvas）元素和JQuery UI中的拖動(draggable)部件和縮放(resizable)部件。在畫布上能夠做各種圖片編輯動作，例如將圖片複製貼上，將圖片放大縮小or將圖片變色又或者得到圖片數據等等。JQuery UI提供的拖動和縮放部件可以幫助使用者選取圖片中的一部分當作頭像，做法和我以前寫的動畫設計工作雛型很像(超連結)。

1.現有的流程
我們先來看看現有得頭像編輯的流程，然後再來討論如何使用html5做相應替換。

1）頭像編輯頁面(原始)	頭像編輯頁面是由下面的請求得到的: GET /home.php?mod=spacecp&ac=avatar 處理請求的腳本是/source/include/spacecp/spacecp_avatar.php, 而網頁的格式定義在模板的文件 template/default/home/spacecp_avatar.htm 中。該網頁上包含了一個Flash動畫 uc_server/images/camera.swf，提供了頭像編輯客戶端的功能: GET /uc_server/images/camera.swf?inajax=1&appid=1&input=201eHYPCqwF...
2）上傳頭像照片	頭像文件的選擇和上傳都是Flash動畫camera.swf 顯示的。他向服務器發送下面的請求，其中包含了頭像文件的內容： POST /uc_server/index.php?m=user&inajax=1&a=uploadavatar&appid=1&input=201eHYPCqwF... 這個請求是由腳本檔案中/uc_server/control/user.php函數 onuploadavatar處理出現的。他在服務端保存了這個檔案，並將該檔案的路徑發還給Flash動畫camera.swf
3）編輯修改頭像	圖片的縮放和編輯功能是Flash動畫camera.swf提供的。當點擊確定按鈕後，Flash動畫向服務器發送了下面的請求： POST /uc_server/index.php?m=user&inajax=1&a=rectavatar&appid=1&input=201eHYPCqwF... urlReaderTS=1451947309935&avatar1=FFD8FFE000104A4649460001... 請求中含有經過編輯的大中小三種尺寸頭像。服務器上的腳本 uc_server/control/user.php 處理了這個請求，把上傳上來寶頭像保存下來。
4）上傳完畢顯示頭像	三種尺寸的頭像顯示也是由Flash動畫camera.swf 提供。

 我們的目標是用html5和JQuery UI裡面的功能來完全取代Flash動畫camera.swf，盡可能地保持服務器上的處理功能不受到任何影響。


2. 檔案修改
總共修改了三個檔案：
1）語言包source/language/home/lang_template.php： 加入頭像編輯所需要的中文 （原始的中文是寫在uc_server/images/locale.xml中的，並沒有定義在語言包中）
'back_file_selection' => '返回重新選擇, 'upload_succeed' => '上傳成功!', 'three_avatars' => '以上是您頭像的三種尺寸'
 2）腳本檔案 uc_server/control/user.php： 對文件user.php中的函數 onrectavatar 做了些許調整，因為從canvas得到的是用base64編碼後的圖片數據，所以在腳本文件裡要做相應的解碼。
3）模板檔案 template/default/home/spacecp_avatar.htm： 主要的改動都在定義頭像編輯的網頁模板文件中。拋棄原本使用的Flash中的 camera.swf, 相對應的功能都改用html元素和javascript來呈現，全都定義在這個模板中了

3. html5新的上傳流程
修改之後的頭像上傳&編輯流程變更為以下：

1）頭像上傳&編輯頁面	頭像編輯頁面由下面的請求得到的: GET /home.php?mod=spacecp&ac=avatar 處理請求的表本是 source/include/spacecp/spacecp_avatar.php, 而網頁的格式定義在模板文件中 template/default/home/spacecp_avatar.htm 。該網頁上班含了幾個畫布，提供了頭像編輯的客戶端功能: GET /uc_server/images/camera.swf?inajax=1&appid=1&input=201eHYPCqwF...
2）上傳頭像圖片	頭項文件的選擇和上傳全都改由html中的file元素提供。它向服務器發送了下面的請求，其中包含了頭像文件的內容： POST /uc_server/index.php?m=user&inajax=1&a=uploadavatar&appid=1&input=201eHYPCqwF... 這個請求是由腳本 uc_server/control/user.php中函數 onuploadavatar 處理。他在服務器上保存了這個檔案，並將該文件發還給客戶端。
3）編輯&修改頭像	圖片中的縮放和編輯功能完全由畫布和JQuery UI的拖拉與縮放部件和共同完成的。當點擊確定送出後，客戶端向服務器發送了下面的請求： POST /uc_server/index.php?m=user&inajax=1&a=rectavatar&appid=1&input=201eHYPCqwF... ------WebKitFormBoundary7I7NlBxh4ycJkBD8 Content-Disposition: form-data; name="avatar1" /9j/4AAQSkZJRgABAQAAAQABAAD... 請求含有經過編輯的大中小三種尺寸的頭像。由服務器上的腳本 uc_server/control/user.php 處理了這個請求，最後把上傳上來的頭像保存下來。
4）顯示頭像(大中小)	三種尺寸的頭像也都是全由畫布所提供。

4. 功能示範
抱歉，礙於本站無法提供範例，所以不會提供出範例，若需範例可以到彼岸網天香公主博客看，或者觀看上方圖片。

檔案下載：http://www.bian-wang.com/upload/avatar_160104a.zip
 ※檔案部分，目前是採用彼岸網來源，看後續是否有人需要下載下來觀看，我這邊會再另外找一個空見放看看，但是這個礙於要占用所以目前不考量。
（注意這邊的語言包是採用簡體中文UTF-8，如果網站使用的是其他語系，建議於原始的語言包加入應對應中文字）

2016/03/09 補充： 網友carry0987告知這個修改在他的網站上沒有任何動靜。和他一起排查問題，發現spacecp_avatar.htm裡我原本用jQuery的地方都改成＄後頭像功能就能使用了。 （更準確說為了不影響Discuz而使用＄，我還將＄賦給了另一個變量＄1，然後又將＄還給了Discuz）。為什麼會出現這種情況呢？懷疑這和我在引入jquery檔案前，在該網站上另一個版本的jquery文件已經被一個插件引用有關。謝謝網友carry0987的幫助！更新文件如下：
http://www.bian-wang.com/upload/avatar_160309.zip
※檔案部分，目前是採用彼岸網來源，看後續是否有人需要下載下來觀看，我這邊會再另外找一個空見放看看，但是這個礙於要占用所以目前不考量。 

2016/10/12 補充： 關於頭像裁剪界面的一些細節：盡可能的重現原來的規則

   1. 選擇框位置：

• 最初顯示在顯示框中央，長寬各150px，但不超出圖片顯示的範圍
• 在任何時刻，選擇框不超出顯示框的範圍
• 除非是在選擇過程中，選擇框不超出圖片顯示的範圍

   2. 圖片顯示尺寸：

• 保持圖片原來的長寬比例不變
• 當縮放條的選擇位置在最左端時，圖片顯示長和寬小的一方是48px
• 當縮放條的選擇位置在中間時，圖片顯示為圖片尺寸和顯示框尺寸的較小值，但不小於48px
• 當縮放條的選擇位置在最右端時，圖片顯示為圖片尺寸和顯示框尺寸的較大值
• 當縮放條的選擇位置在其它位置時，圖片顯示尺寸由上述三尺寸線性插值所得

    3. 圖片顯示位置：

• 在任何時刻，圖片顯示範圍與顯示框左右端的距離比例和選擇框與顯示框左右端的距離比例相同，圖片顯示範圍與顯示框上下端的距離比例和選擇框與顯示框上下端的距離比例相同

    4. 頭像保存：

• (大)頭像：按選擇框的範圍截取頭像，如果長寬分別不超過200px和250px，按原樣保存。不然，按比例縮小至長寬分別不超過200px和250px
• (中)頭像：按選擇框的範圍截取頭像，如果長寬均不超過120px，按原樣保存。不然，按比例縮小至長寬均不超過120px
• (小)頭像：在選擇框的範圍以選擇框的中心為中心截取最大的正方形區域，縮放成48px的正方形保存

出處:彼岸網
作者:天香公主
翻譯及修改部分文句:HF
原網址:點我