FullAvatarEditor頭像上傳編輯器支持本地上傳、預(yù)覽、視頻拍照等多功能的Flash頭像編輯上傳插件。上傳后，可進(jìn)行自定義縮放、裁剪、旋轉(zhuǎn)、定位和調(diào)色功能，支持自定義原圖上傳，支持多種接口，兼容性強(qiáng)，跨平臺(tái)使用。

下面介紹簡(jiǎn)單的快速入門方法：

1、首先下載必須的文件 地址： http://fullavatareditor.com/download.html ，下載后找到如下圖的四個(gè)文件。

必須的四個(gè)文件

2、在頁面中引入fullAvatarEditor.js、swfobject.js兩個(gè)js文件（前提需先引入jq）

<script type="text/javascript" src="/jslib/fullAvatarEditor/swfobject.js"></script>
<script type="text/javascript" src="/jslib/fullAvatarEditor/fullAvatarEditor.js"></script>

3、在頁面中可寫如下結(jié)構(gòu)，F(xiàn)ullAvatarEditor會(huì)先進(jìn)行一個(gè)flash是否安裝的判斷，如未安裝，將顯示需要下載安裝的提示。反之則直接顯示可調(diào)用的部分

<div style="width:800px;margin: 0 auto;">
<h1 style="text-align:center">富頭像上傳編輯器演示</h1>
<div>
<p id="swfContainer">本組件需要安裝Flash Player后才可使用，請(qǐng)從<a >這里</a>下載安裝。
</p>
</div>
</div>

4、具體的調(diào)用方法

new fullAvatarEditor(swfContainerID, [height], [width], flashvars, [callback]);

swfContainerID 非必須 string用以包裹Flash的HTML元素的ID。

height 必須 numberFlash的高度，默認(rèn)為 600。

width 必須 numberFlash的寬度，默認(rèn)為 630。

flashvars 非必須 object將要傳遞到 flash 的 key/value 參數(shù)，請(qǐng)參見 配置參數(shù)。

callback 必須 functionflash執(zhí)行某些操作時(shí)的回調(diào)函數(shù)，請(qǐng)參見 回調(diào)函數(shù)。

示例：

swfobject.addDomLoadEvent(function () {
//avatar_sizes : '100*100|50*50|32*32',
 //avatar_sizes_desc : '100*100像素|50*50像素|32*32像素'
var swf=new fullAvatarEditor("/jslib/fullAvatarEditor/fullAvatarEditor.swf", "/jslib/fullAvatarEditor/expressInstall.swf", "swfContainer", {
id : 'swf',
upload_url : '/plus/douploadavatar.html', //上傳接口
method : 'post', //傳遞到上傳接口中的查詢參數(shù)的提交方式。更改該值時(shí)，請(qǐng)注意更改上傳接口中的查詢參數(shù)的接收方式
src_upload : 0, //是否上傳原圖片的選項(xiàng)，有以下值：0-不上傳；1-上傳；2-顯示復(fù)選框由用戶選擇
avatar_box_border_width : 0,
button_visible: true,
checkbox_visible: false,
avatar_sizes : '100*100',
avatar_sizes_desc : '100*100像素'
}, function (msg) {
switch(msg.code)
{
case 1 : //alert("頁面成功加載了組件！");
break;
case 2 :
//alert("已成功加載圖片到編輯面板。");
//document.getElementById("upload").style.display="inline";
break;
case 3 :
if(msg.type==0){
alert("攝像頭已準(zhǔn)備就緒且用戶已允許使用。");
} else if(msg.type==1) {
alert("攝像頭已準(zhǔn)備就緒但用戶未允許使用！");
} else {
alert("攝像頭被占用！");
}
break;
case 5 :
switch(msg.type) {
case 0:
if(msg.content.sourceUrl) {
//alert("原圖已成功保存至服務(wù)器，url為：\n" +　msg.content.sourceUrl+"\n\n" + "頭像已成功保存至服務(wù)器，url為：\n" + msg.content.avatarUrls.join("\n\n")+"\n\n傳遞的userid="+msg.content.userid+"&username="+msg.content.username);
} else {
//alert("頭像已成功保存至服務(wù)器，url為：\n" + msg.content.avatarUrls.join("\n\n")+"\n\n傳遞的userid="+msg.content.userid+"&username="+msg.content.username);
}
location.reload();
break;
case 1:
alert('頭像上傳失敗，原因：' + msg.content.msg);
break;
case 2:
alert('頭像上傳失敗，原因：指定的上傳地址不存在或有問題！');
break;
case 3:
alert('頭像上傳失敗，原因：發(fā)生了安全性錯(cuò)誤！請(qǐng)聯(lián)系站長(zhǎng)添加crossdomain.xml到網(wǎng)站根目錄。');
break;
}
break;
}
}); //當(dāng)需要用到自定義上傳按鈕時(shí)使用以下事件
//document.getElementById("upload").onclick=function(){
 // swf.call("upload");
 //};
});

fullAvatarEditor上傳界面

fullAvatarEditor編輯界面

fullAvatarEditor攝像頭調(diào)用界面