《富頭像上傳編輯器fullavatareditor官網打不開了，簡單用法珍藏》要點：
本文介紹了富頭像上傳編輯器fullavatareditor官網打不開了，簡單用法珍藏，希望對您有用。如果有疑問，可以聯系我們。

相關主題：JS、Jquery插件 / 文件圖片上傳插件

今天突然發現富頭像上傳編輯器fullavatareditor官網居然打不開了，可惜。

不過這里還有下載 https://github.com/hehongwei44/Project-FE/tree/master/fullAvatarEditor頭像編輯器 

可惜沒有了詳細文檔了。

這是一個很好用的插件，富頭像上傳編輯器是一款支持本地上傳、預覽、視頻拍照和網絡加載的flash頭像編輯上傳插件，可縮放、裁剪、旋轉、定位和調色等...

小巧的身材：文件大小僅僅只有 48 KB，而新浪的頭像編輯器組件有 58.1 KB，更有甚者達 80 KB 之多。 

漂亮的外觀：灰色系的外觀設計，適用于所有風格的站點。還可輕松地實現換膚。 

強大的功能：原圖支持本地上傳、視頻拍照和網絡加載，圖片編輯有縮放、裁剪、旋轉、定位和調色等功能。 

豐富的接口：可自定義頭像（大小、數目...）、所有文本（包括其字體，大小，顏色，方便擴展多語言站點）、可在外部接口中定義選項卡、按鈕... 

跨平臺兼容：運行環境Flash Player 10.1+，任何瀏覽器 IE All、Firefox、 Chrome、Opera...都正常使用。 

極致的體驗：人性化的設計方式，細節上精心的處理，用戶使用起來得心應手。

要說缺點，唯一的缺點就是使用flash組件，可能瀏覽器兼容上有所不足。不過，這個插件相當好用。

如今官網關閉，一堆的文檔的參數選項都沒了。下面這個案例就珍藏吧。

效果圖：

代碼：

1、HTML部分：頭像上傳容器展示

<div>
       <p id="swfContainer">
              本組件需要安裝Flash Player后才可使用，請從
              <a href="http://www.adobe.com/go/getflashplayer">這里</a>下載安裝。
       </p>
</div>

2、JS部分：引入文件并調用

A、引入文件：

<script src="/public/js/fullavatareditor/scripts/swfobject.js"></script>
<script src="/public/js/fullavatareditor/scripts/fullAvatarEditor.js"></script>

B、調用：

swfobject.addDomLoadEvent(function () {
var swf = new fullAvatarEditor(
       "/public/js/fullavatareditor/fullAvatarEditor.swf",
       "/public/js/fullavatareditor/expressInstall.swf",
       "swfContainer",
              {
                     id : "swf",
                     upload_url : "/test/upload.php",
                     method : "post",
                     quality: 90,   //圖片質量
                     //【原圖選項】
                     src_url: 'http://www.fzlkiss.com/public/uploads/avatars/2017050107413722900.jpg',  //初始的頭像
                     src_size: "200KB",  //原圖限制大小
                     browse_tip     :  '僅支持JPG、JPEG、GIF、PNG格式的圖片文件\n文件不能大于200KB',
                     src_size_over_limit    :'文件大小（{0}）超出限制（200KB）\n請壓縮圖片重新上傳！',
                     src_upload : 0,  //是否上傳原圖 ：0 ---不上傳     1 ---上傳        2 ---顯示復選框由用戶選擇
                     src_box_width :  300,  //原圖編輯框的寬度。
                     src_box_border_color : '#0a8',  //原圖編輯框的邊框顏色
                     //【選項卡】
                     //tab_visible :  false,  //不顯示選項卡。攝相頭功能取消。
                     tab_font_size: '13',   //選項卡字體大小，默認14
                     //avatar_sizes: '100*100|50*50|32*32',  //多組上傳
                                          //avatar_sizes_desc: '100*100像素|50*50像素|32*32像素' //多組提示
                     avatar_sizes : '150*150', //'150*174',
                     avatar_sizes_desc : '150*150像素',    //提示信息：
                     isShowUploadResultIcon : false,    //不顯示表示上傳結果的圖標。
                     //上傳按鈕文字
                     button_upload_text : '保存頭像',
                     button_cancel_text :  '重新上傳',
              },
              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) {
                                          layer.alert('攝像頭已準備就緒但用戶未允許使用！', {icon:5});
                                   } else{
                                          layer.alert('攝像頭被占用！', {icon:5});
                                   }
                                   break;
                            case 5 :
                                   if(msg.type == 0) {  //msg.content是服務端返回的JSON值
                                          layer.alert('恭喜！頭像已更換成功！', {icon:1, area:['300px', '180px']}, function(){window.location.href='/member-index';});
                                   }else{
                                          layer.alert('上傳失敗：'+msg.content.msg, {icon:3, area:['300px','210px']});
                                   }
                                   break;
                     }
              }
       );
       /*document.getElementById("upload").onclick=function(){
        swf.call("upload");
        };*/
});

C、PHP端： 接收圖像。

這里使用vephp上傳類，可以換成你自己的上傳。默認服務端接收$_FILES["__source"]即可。

//合法性驗證和令牌信息，此略。..
//接收圖像
$imgWidth = $this->thumbWidth;   //頭像寬
$imgHeight= $this->thumbHeight;
$imgMaxSize = intval ($this->thumbMaxSize).'KB';  //頭像大小上限，單位K

//使用vephp.com上傳類
$upObj = new upload('__avatar1',2,1,1,'jpg|jpeg|gif|png', $this->imgUpPath,true,false,$imgMaxSize , 0 , $imgWidth,$imgHeight);
if($upObj->upOkNum ==1 )
{
       echo '{"success" : true}';  //這里可以傳遞圖片名稱如： echo '{"success" : true , "picname": "'.$newName.'"}';
       $event = '上傳LOGO';
       //1、保存頭像入庫
       #略

       //2、刪除舊頭像：略

}
else
{
       $upObj->allErrorMsg = str_replace('文件《__avatar1.jpg》','Logo',$upObj->allErrorMsg);
       echo '{"success" : false,   "msg" :"'.$upObj->allErrorMsg.'" }';
}

unset($upObj);

轉載請注明本頁網址：
http://www.fzlkiss.com/jiaocheng/106.html