当前位置： 维易PHP培训学院 > javascript教程 > 内容正文

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

作者：维易PHP培训学院   时间 2017-05-01

《富头像上传编辑器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组件，可能浏览器兼容上有所不足。不过，这个插件相当好用。

如今官网关闭，一堆的文档的参数选项都没了。下面这个案例就珍藏吧。

效果图：

富头像上传编辑器fullavatareditor官网打不开了，珍藏吧


代码：

1、HTML部分：头像上传容器展示

  1. <div>
  2.        <p id="swfContainer">
  3.               本组件需要安装Flash Player后才可使用，请从
  4.               <a href="http://www.adobe.com/go/getflashplayer">这里</a>下载安装。
  5.        </p>
  6. </div>


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

A、引入文件：

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


B、调用：

  1. swfobject.addDomLoadEvent(function () {
  2. var swf = new fullAvatarEditor(
  3.        "/public/js/fullavatareditor/fullAvatarEditor.swf",
  4.        "/public/js/fullavatareditor/expressInstall.swf",
  5.        "swfContainer",
  6.               {
  7.                      id : "swf",
  8.                      upload_url : "/test/upload.php",
  9.                      method : "post",
  10.                      quality: 90,   //图片质量
  11.                      //【原图选项】
  12.                      src_url: 'http://www.vephp.com/public/uploads/avatars/2017050107413722900.jpg',  //初始的头像
  13.                      src_size: "200KB",  //原图限制大小
  14.                      browse_tip     :  '仅支持JPG、JPEG、GIF、PNG格式的图片文件\n文件不能大于200KB',
  15.                      src_size_over_limit    :'文件大小（{0}）超出限制（200KB）\n请压缩图片重新上传！',
  16.                      src_upload : 0,  //是否上传原图 ：0 ---不上传     1 ---上传        2 ---显示复选框由用户选择
  17.                      src_box_width :  300,  //原图编辑框的宽度。
  18.                      src_box_border_color : '#0a8',  //原图编辑框的边框颜色
  19.                      //【选项卡】
  20.                      //tab_visible :  false,  //不显示选项卡。摄相头功能取消。
  21.                      tab_font_size: '13',   //选项卡字体大小，默认14
  22.                      //avatar_sizes: '100*100|50*50|32*32',  //多组上传
  23.                                           //avatar_sizes_desc: '100*100像素|50*50像素|32*32像素' //多组提示
  24.                      avatar_sizes : '150*150', //'150*174',
  25.                      avatar_sizes_desc : '150*150像素',    //提示信息：
  26.                      isShowUploadResultIcon : false,    //不显示表示上传结果的图标。
  27.                      //上传按钮文字
  28.                      button_upload_text : '保存头像',
  29.                      button_cancel_text :  '重新上传',
  30.               },
  31.               function (msg) {
  32.                      switch(msg.code) {
  33.                             //case 1 : alert("页面成功加载了组件！");break;
  34.                             //case 2 : alert("已成功加载图片到编辑面板。");break;  //选中图片后
  35.                             case 3 :
  36.                                    if(msg.type == 0){     /*alert("摄像头已准备就绪且用户已允许使用。");*/        }
  37.                                    else if(msg.type == 1) {
  38.                                           layer.alert('摄像头已准备就绪但用户未允许使用！', {icon:5});
  39.                                    } else{
  40.                                           layer.alert('摄像头被占用！', {icon:5});
  41.                                    }
  42.                                    break;
  43.                             case 5 :
  44.                                    if(msg.type == 0) {  //msg.content是服务端返回的JSON值
  45.                                           layer.alert('恭喜！头像已更换成功！', {icon:1, area:['300px', '180px']}, function(){window.location.href='/member-index';});
  46.                                    }else{
  47.                                           layer.alert('上传失败：'+msg.content.msg, {icon:3, area:['300px','210px']});
  48.                                    }
  49.                                    break;
  50.                      }
  51.               }
  52.        );
  53.        /*document.getElementById("upload").onclick=function(){
  54.         swf.call("upload");
  55.         };*/
  56. });


C、PHP端： 接收图像。

这里使用vephp上传类，可以换成你自己的上传。默认服务端接收$_FILES["__source"]即可。

  1. //合法性验证和令牌信息，此略。..
  2. //接收图像
  3. $imgWidth = $this->thumbWidth;   //头像宽
  4. $imgHeight= $this->thumbHeight;
  5. $imgMaxSize = intval ($this->thumbMaxSize).'KB';  //头像大小上限，单位K
  6.  
  7. //使用vephp.com上传类
  8. $upObj = new upload('__avatar1',2,1,1,'jpg|jpeg|gif|png', $this->imgUpPath,true,false,$imgMaxSize , 0 , $imgWidth,$imgHeight);
  9. if($upObj->upOkNum ==1 )
  10. {
  11.        echo '{"success" : true}';  //这里可以传递图片名称如： echo '{"success" : true , "picname": "'.$newName.'"}';
  12.        $event = '上传LOGO';
  13.        //1、保存头像入库
  14.        #略
  15.  
  16.        //2、删除旧头像：略
  17.  
  18. }
  19. else
  20. {
  21.        $upObj->allErrorMsg = str_replace('文件《__avatar1.jpg》','Logo',$upObj->allErrorMsg);
  22.        echo '{"success" : false,   "msg" :"'.$upObj->allErrorMsg.'" }';
  23. }
  24.  
  25. unset($upObj);

转载请注明本页网址：
http://www.vephp.com/jiaocheng/106.html


    标签：fullavatareditor  头像上传  



相关教程


同类教程排行


特辑教程