富头像上传编辑器fullavatareditor官网打不开了，简单用法珍藏

《富头像上传编辑器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.vephp.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.vephp.com/jiaocheng/106.html