富頭像上傳編輯器（flash頭像上傳外掛）
阿新 • • 發佈：2019-02-04
富頭像上傳編輯器是一款支援本地上傳、預覽、視訊拍照和網路載入的flash頭像編輯上傳外掛，可縮放、裁剪、旋轉、定位和調色等...
小巧的身材：檔案大小僅僅只有 48 KB，而新浪的頭像編輯器元件有 58.1 KB，更有甚者達 80 KB 之多以上。
漂亮的外觀：灰色系的外觀設計，適用於所有風格的站點。還可輕鬆地實現換膚。
強大的功能：原圖支援本地上傳、視訊拍照和網路載入，圖片編輯有縮放、裁剪、旋轉、定位和調色等功能。
豐富的介面：可自定義頭像（大小、數目...）、所有文字（包括其字型，大小，顏色，方便擴充套件多語言站點）、可在外部介面中定義選項卡、按鈕...
跨平臺相容：執行環境Flash Player 10.1+，任何瀏覽器 IE All、Firefox、 Chrome、Opera...都正常使用。
極致的體驗：人性化的設計方式，細節上精心的處理，使用者使用起來得心應手。
快速上手
一：從 下載頁面 下載外掛包解壓後，在頁面的 head 標籤內引入以下指令碼檔案
1
2
<script type="text/javascript" src="/scripts/swfobject.js"></script>
<script type="text/javascript" src="/scripts/fullAvatarEditor.js"></script>
二：呼叫方法
1
new fullAvatarEditor(swfContainerID, [height], [width], flashvars, [callback]);
返回值：object，該物件可呼叫call方法，請參見 call方法。
引數
名稱可選型別概述
swfContainerID否string用以包裹Flash的HTML元素的ID。
height是 numberFlash的高度，預設為 600。
width是 numberFlash的寬度，預設為 630。
flashvars否 object將要傳遞到 flash 的 key/value 引數，請參見 配置引數。
callback是 functionflash執行某些操作時的回撥函式，請參見 回撥函式。
三：簡單示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Simple demo</title>
<script type="text/javascript" src="/scripts/swfobject.js"></script>
<script type="text/javascript" src="/scripts/fullAvatarEditor.js"></script>
</head>
<body>
<div style="width:800px;margin: 0 auto;">
<h1 style="text-align:center">富頭像上傳編輯器演示</h1>
<div>
<p id="swfContainer">
本元件需要安裝Flash Player後才可使用，請從
<a href="http://xxx.adobe.com/go/getflashplayer">這裡</a>
下載安裝。
</p>
</div>
<button type="button" id="upload">自定義上傳按鈕</button>
</div>
<script type="text/javascript">
swfobject.addDomLoadEvent(function () {
var swf = new fullAvatarEditor("swfContainer", {
id: 'swf',
upload_url: '/Upload.php',
src_url: "/samplePictures/Default.jpg",
src_upload:2
}, function (msg) {
switch(msg.code)
{
case 1 : alert("頁面成功載入了元件！");break;
case 2 : alert("已成功載入預設指定的圖片到編輯面板。");break;
case 3 :
if(msg.type == 0)
{
alert("攝像頭已準備就緒且使用者已允許使用。");
}
else if(msg.type == 1)
{
alert("攝像頭已準備就緒但使用者未允許使用！");
}
else
{
alert("攝像頭被佔用！");
}
break;
case 5 :
if(msg.type == 0)
{
if(msg.content.sourceUrl)
{
alert("原圖片已成功儲存至伺服器，url為：\n" + msg.content.sourceUrl);
}
alert("頭像已成功儲存至伺服器，url為：\n" + msg.content.avatarUrls.join("\n"));
}
break;
}
}
);
document.getElementById("upload").onclick=function(){
swf.call("upload");
};
});
</script>
</body>
</html>
執行
更新記錄
v2.0：新增在上傳完成時（無論成功和失敗），是否顯示錶示上傳結果圖示的引數：isShowUploadResultIcon；
新增可自定義原圖和頭像表單域名稱的引數：src_field_name 和 avatar_field_names。
v1.9：修復了原圖url中帶旋轉引數時，另外上傳/載入的圖片會沿用當前旋轉值的錯誤；
檢視引數（__initParams）新增選取框尺寸引數，至此檢視已臻佳境。
v1.8：將追加到上傳介面url後的引數的提交方式更改為POST，避免參數中含有特殊字元（如base64中的+號）時產生錯誤。
修復了將頭像顏色調整工具隱藏（avatar_tools_visible=false）時，部分版本的 Flash Player 產生異常的錯誤；
修復了部分奇葩的圖片在編碼時產生異常的錯誤。
v1.7：修復了當載入的原圖url中帶檢視引數（__initParams）時，旋轉值未正確初始化的錯誤；
優化了生成頭像的速度。
v1.6：修復了後臺只能獲取upload_url（上傳圖片的介面）中首個引數的問題；
提升了生成的頭像圖片的質量。
v1.5：新增頭像儲存時的縮放係數（需求大尺寸頭像而又不想被其破壞頁面佈局時很有用）；
新增基於原圖的初始化引數__initParams（表單欄位，用於修改頭像時保證檢視跟儲存頭像時一致，幫助提升使用者體驗）。
v1.4：修復了上傳原圖時如果是使用攝像頭拍照的方式而得到的原圖並非來自攝像頭的錯誤。
v1.3：修復頭像顏色調整未渲染到生成的圖片的bug；
新增生成的圖片的質量控制引數 quality。
v1.2：新增是否顯示頭像顏色調整工具的引數 avatar_tools_visible。
v1.1：將各矩形框的引數獨立出來，更加方便外觀的表現。
小巧的身材：檔案大小僅僅只有 48 KB，而新浪的頭像編輯器元件有 58.1 KB，更有甚者達 80 KB 之多以上。
漂亮的外觀：灰色系的外觀設計，適用於所有風格的站點。還可輕鬆地實現換膚。
強大的功能：原圖支援本地上傳、視訊拍照和網路載入，圖片編輯有縮放、裁剪、旋轉、定位和調色等功能。
豐富的介面：可自定義頭像（大小、數目...）、所有文字（包括其字型，大小，顏色，方便擴充套件多語言站點）、可在外部介面中定義選項卡、按鈕...
跨平臺相容：執行環境Flash Player 10.1+，任何瀏覽器 IE All、Firefox、 Chrome、Opera...都正常使用。
極致的體驗：人性化的設計方式，細節上精心的處理，使用者使用起來得心應手。
快速上手
一：從 下載頁面 下載外掛包解壓後，在頁面的 head 標籤內引入以下指令碼檔案
1
2
<script type="text/javascript" src="/scripts/swfobject.js"></script>
<script type="text/javascript" src="/scripts/fullAvatarEditor.js"></script>
二：呼叫方法
1
new fullAvatarEditor(swfContainerID, [height], [width], flashvars, [callback]);
返回值：object，該物件可呼叫call方法，請參見 call方法。
引數
名稱可選型別概述
swfContainerID否string用以包裹Flash的HTML元素的ID。
height是 numberFlash的高度，預設為 600。
width是 numberFlash的寬度，預設為 630。
flashvars否 object將要傳遞到 flash 的 key/value 引數，請參見 配置引數。
callback是 functionflash執行某些操作時的回撥函式，請參見 回撥函式。
三：簡單示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Simple demo</title>
<script type="text/javascript" src="/scripts/swfobject.js"></script>
<script type="text/javascript" src="/scripts/fullAvatarEditor.js"></script>
</head>
<body>
<div style="width:800px;margin: 0 auto;">
<h1 style="text-align:center">富頭像上傳編輯器演示</h1>
<div>
<p id="swfContainer">
本元件需要安裝Flash Player後才可使用，請從
<a href="http://xxx.adobe.com/go/getflashplayer">這裡</a>
下載安裝。
</p>
</div>
<button type="button" id="upload">自定義上傳按鈕</button>
</div>
<script type="text/javascript">
swfobject.addDomLoadEvent(function () {
var swf = new fullAvatarEditor("swfContainer", {
id: 'swf',
upload_url: '/Upload.php',
src_url: "/samplePictures/Default.jpg",
src_upload:2
}, function (msg) {
switch(msg.code)
{
case 1 : alert("頁面成功載入了元件！");break;
case 2 : alert("已成功載入預設指定的圖片到編輯面板。");break;
case 3 :
if(msg.type == 0)
{
alert("攝像頭已準備就緒且使用者已允許使用。");
}
else if(msg.type == 1)
{
alert("攝像頭已準備就緒但使用者未允許使用！");
}
else
{
alert("攝像頭被佔用！");
}
break;
case 5 :
if(msg.type == 0)
{
if(msg.content.sourceUrl)
{
alert("原圖片已成功儲存至伺服器，url為：\n" + msg.content.sourceUrl);
}
alert("頭像已成功儲存至伺服器，url為：\n" + msg.content.avatarUrls.join("\n"));
}
break;
}
}
);
document.getElementById("upload").onclick=function(){
swf.call("upload");
};
});
</script>
</body>
</html>
執行
更新記錄
v2.0：新增在上傳完成時（無論成功和失敗），是否顯示錶示上傳結果圖示的引數：isShowUploadResultIcon；
新增可自定義原圖和頭像表單域名稱的引數：src_field_name 和 avatar_field_names。
v1.9：修復了原圖url中帶旋轉引數時，另外上傳/載入的圖片會沿用當前旋轉值的錯誤；
檢視引數（__initParams）新增選取框尺寸引數，至此檢視已臻佳境。
v1.8：將追加到上傳介面url後的引數的提交方式更改為POST，避免參數中含有特殊字元（如base64中的+號）時產生錯誤。
修復了將頭像顏色調整工具隱藏（avatar_tools_visible=false）時，部分版本的 Flash Player 產生異常的錯誤；
修復了部分奇葩的圖片在編碼時產生異常的錯誤。
v1.7：修復了當載入的原圖url中帶檢視引數（__initParams）時，旋轉值未正確初始化的錯誤；
優化了生成頭像的速度。
v1.6：修復了後臺只能獲取upload_url（上傳圖片的介面）中首個引數的問題；
提升了生成的頭像圖片的質量。
v1.5：新增頭像儲存時的縮放係數（需求大尺寸頭像而又不想被其破壞頁面佈局時很有用）；
新增基於原圖的初始化引數__initParams（表單欄位，用於修改頭像時保證檢視跟儲存頭像時一致，幫助提升使用者體驗）。
v1.4：修復了上傳原圖時如果是使用攝像頭拍照的方式而得到的原圖並非來自攝像頭的錯誤。
v1.3：修復頭像顏色調整未渲染到生成的圖片的bug；
新增生成的圖片的質量控制引數 quality。
v1.2：新增是否顯示頭像顏色調整工具的引數 avatar_tools_visible。
v1.1：將各矩形框的引數獨立出來，更加方便外觀的表現。