小議頭像預覽裁剪上傳的實現

標籤：discuz   style   http   color   檔案   資料   for   art   

在做頭像上傳的時候，瀏覽器預設是無法取得本地圖片的，當然 HTML5 是可以的。
不過IE6-8怎麼破？
目前比較通用的方案都是 flash 解決。

說道頭像預覽和裁剪，我最熟悉的就是 Discuz 的那個了，非常方便好用。
不僅可以選擇本地圖片，還能直接調用網路攝影機拍攝，當然前提是你必須有個網路攝影機。

於是我心血來潮的想把他剝離出來給項目用，於是有就了此文。。
我就不說怎麼提取怎麼調用，就簡單的談談他是怎麼處理圖片好了，反正不是我們想的那樣，和我想的出入非常大。

這個外掛程式呢，差不多分為四步處理：
1. 前台用js產生IE或現代瀏覽器用的flash嵌入標籤
2. 通過 flash 選擇圖片上傳給伺服器 (沒錯, 這貨是直接上傳原圖的)
3. 讀取剛剛上傳到伺服器的圖片，進行裁剪處理。
4. 把裁剪好的圖片分別縮放為 200x200, 120x120, 48x48 的圖，當然不檔案，而是編碼資料提交給後台，
沒仔細看是什麼編碼，反正後台解碼後fopen寫入檔案的。

當然果然是網路攝影機拍攝的話，2, 3步變為拍攝，1, 4一樣的。
好了，看過步驟，相信大家和我一樣灰常桑心，，說好的預覽，腫麼變成上傳後預覽了，那要你何用？
難道僅僅為了裁剪而調用這麼變態的外掛程式嗎？這不是我的作風。(當然目前用他，因為項目時間有限，之後再重寫)

下面我們來談下 js 實現思路吧。
既然沒辦法預覽(HTML5除外)，那麼我們就先上傳，然後"裁剪"即可。
FormData或iframe做偽ajax上傳，得到檔案路徑後，就可以預覽，
然後"裁剪"即可。
當然不是真正的裁剪，也是偽裁剪，只是記錄座標後提交給後台，讓後台為我們真正的裁剪。
因為圖片第一步上傳了，第二步我們只要ajax提交裁剪地區座標即可，不需要重新上傳圖片。
相信聰明的你一定想到怎麼實現了。

當然你也可以參考 碳酸次鈷 寫的《線上圖片裁剪（相容IE8）》。
其實如果不是濾鏡的相容性和安全問題就可全相容，
當然我的思路就是直接上傳後裁剪，所以是真正的全相容。