fullAvatarEditor富头像上传编辑器

插件介绍

富头像上传编辑器是一款支持本地上传、预览、视频拍照和网络加载的flash头像编辑上传插件,可缩放、裁剪、旋转、定位和调色等,只可惜现在官网关闭了。百度网盘下载 提取密码:bpe5。

小巧的身材:文件大小仅仅只有 48 KB,而新浪的头像编辑器组件有 58.1 KB,更有甚者达 80 KB 之多以上。 漂亮的外观:灰色系的外观设计,适用于所有风格的站点。还可轻松地实现换肤。 强大的功能:原图支持本地上传、视频拍照和网络加载,图片编辑有缩放、裁剪、旋转、定位和调色等功能。 丰富的接口:可自定义头像(大小、数目...)、所有文本(包括其字体,大小,颜色,方便扩展多语言站点)、可在外部接口中定义选项卡、按钮... 跨平台兼容:运行环境Flash Player 10.1+,任何浏览器 IE All、Firefox、 Chrome、Opera...都正常使用。 极致的体验:人性化的设计方式,细节上精心的处理,用户使用起来得心应手。
快速上手
一:从  下载页面 下载插件包解压后,在页面的 head 标签内引入以下脚本文件
  1. <scripttype="text/javascript"src="/scripts/swfobject.js"> </script>
  2. <scripttype="text/javascript"src="/scripts/fullAvatarEditor.js"> </script>
二:调用方法
new fullAvatarEditor(swfContainerID, [height], [width], flashvars, [callback]);
返回值:object,该对象可调用call方法,请参见 call方法参数
名称可选类型概述
swfContainerIDstring用以包裹Flash的HTML元素的ID。
heightnumberFlash的高度,默认为 600
widthnumberFlash的宽度,默认为 630
flashvarsobject将要传递到 flash 的 key/value 参数,请参见 Flashvars 配置参数
callbackfunctionflash执行某些操作时的回调函数,请参见 回调函数
Flashvars 配置参数
名称类型默认值描述
idStringfullAvatarEditor
接收消息的swf的ID,
用以区分同一页面如果存在多个组件。

upload_urlStringnull上传图片的接口。
该接口需返回一个json字符串,

且会原样输出到callback 回调函数的
参数对象的属性content中,

请参见 上传接口的返回数据。
qualityNumber100生成的头像图片的质量,取值范围1-100,
数值越大生成的图片越清晰,
相对地文件也会越大。
isShowUploadResultIconv2.0Booleantrue在上传完成时(无论成功和失败),
是否显示表示上传结果的图标。




callback 回调函数

  • 执行该函数时,函数中的this关键字指向表示swf的HTMLObjectElement,并且会给函数传递一个表示事件消息的json对象作为参数。

  • json对象的属性如下:

  • code : Number主要用来辨识消息的具体来源和内容,以便客户端知道如何处理。

  • type : Number0 表示成功,1 表示警告,2 表示错误,3 表示异常。

  • content : *表示消息的内容。可能的值:

codetypecontent描述
10 页面成功加载组件后触发的事件消息。
2
  • 0

  • 2

 
  • 加载图片成功时触发的事件消息。

  • 加载图片失败时触发的事件消息。

3
  • 0

  • 1

  • 2

 
  • 摄像头已准备就绪且用户已允许使用。

  • 摄像头已准备就绪但用户未允许使用!

  • 摄像头被占用!

42选择的原图片文件大小,带单位。如:8.88MB选择的原图片文件大小超出了指定的值。
5
  • 0

  • 1

  • 2

  • 3

  • 上传接口返回的内容。

  • 表示错误原因的字符串。

  • 表示图片上传成功。

  • 表示图片上传失败,失败原因由上传接口定义!

  • 表示图片上传失败,指定的上传地址不存在或有问题!

  • 表示图片上传失败,发生了安全性错误!

call 方法,这些方法在自定义外界元素(如tab、button)时很有用。

  • object.call(methodName[, methodParameter]);

methodName:String要调用的flash内的方法名称。
methodParameter:String传递到该方法的参数。
  • 该方法供 new fullAvatarEditor 返回的对象(HTMLObjectElement)调用,主要是调用flash里的方法。

可调用的方法枚举表  
methodNamemethodParameter功能描述
changePanelupload 或 webcam切换到本地上传图片选择面板或摄像头拍照面板。
loadPic要加载的图片的url。加载网络图片。
pressShutter 执行拍照操作。
srcUploadtrue|false设置是否上传原图片。
upload 执行上传保存的操作。

发送至上传接口的数据

发送方式:post  
原图file域:Field Name:__source 
File Name:如果是本地和网络图片为原始文件名(不含扩展名)、如果是摄像头拍照则为 *FromWebcam  
头像file域:Field Name:__avatar1,__avatar2,__avatar3,... 即 __avatar + 1至头像总数。 
File Name:同上。  
其他文本域:Field Name:__initParams(String)加载指定url的原图时将该参数追加到url中,可保证视图跟保存头像时一致。可用于修改头像,帮助提升用户体验。注意:上传原图时才会发送该数据。

上传接口的返回数据

接口至少必须返回一个包含名为“success”、值为true(表示上传成功)或false(表示上传失败)的json字符串,且会原样输出到 callback 回调函数 的参数对象的属性content中。 
例:当上传成功或失败时可分别返回以下json对象。


{

    "success" : true,//该名/值对是必须定义的,表示上传成功

    "sourceUrl" : "原图片位于服务器的虚拟路径",

    "avatarUrls": ["头像图片位于服务器的虚拟路径",..]

}

{

    "success" : false,//该名/值对是必须定义的,表示上传失败

    "msg" : "上传的原图文件大小超出限值了!"

}

在进行调用时即可如下使用获取返回的数据


var swf = new fullAvatarEditor('swf', {

    id: 'swf',

    upload_url: '/upload.php'

}, function(json){

    if (json.code == 5)

    {

        switch(json.type)

        {

            //表示图片上传成功。

            case 0:

                alert('原图片位于服务器的虚拟路径为'+json.content.sourceUrl);

                alert('头像图片位于服务器的虚拟路径为'+json.content.avatarUrls.join(','));

            break;

            case 1:

                alert('头像上传失败,原因:' + json.content.msg);//will output:头像上传失败,原因:上传的原图文件大小超出限值了!

            break;

            case 2:

                alert('头像上传失败,原因:指定的上传地址不存在或有问题!');

            break;

            case 3:

                alert('头像上传失败,原因:发生了安全性错误!请联系站长添加crossdomain.xml到网站根目录。');

            break;

        }

}

});




三:简单示例
  1. <!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://www.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").οnclick=function(){
    swf.call("upload");
    };
    });
    </script>
    </body>
    </html>




个人分类:  javascript

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
头像上传编辑器是一款支持本地上传、预览、视频拍照和网络加载的flash头像编辑上传插件,可缩放、裁剪、旋转、定位和调色等... 小巧的身材:文件大小仅仅只有 50 KB,而新浪的头像编辑器组件有 58.1 KB,更有甚者达 80 KB 之多以上。 漂亮的外观:灰色系的外观设计,适用于所有风格的站点。还可轻松地实现换肤。 强大的功能:原图支持本地上传、视频拍照和网络加载,图片编辑有缩放、裁剪、旋转、定位和调色等功能。 丰的接口:可自定义头像(大小、数目...)、所有文本(包括其字体,大小,颜色,方便扩展多语言站点)、可在外部接口中定义选项卡、按钮... 跨平台兼容:运行环境Flash Player 10.1+,任何浏览器 IE All、Firefox、 Chrome、Opera...都正常使用。 极致的体验:人性化的设计方式,细节上精心的处理,用户使用起来得心应手。 在线演示:http://www.fullAvatarEditor.com/demo.html 当前版本:2.3 更新内容: → 修复头像与实际选取区域偏移 1 像素的BUG; 修复默认加载的原图如果有定位数据时图片不显示的BUG。 → 发布时间:2015-04-22 历史版本: v2.2: 修复上传的原始图片没有扩展名的Bug。 发布时间:2015-01-13 v2.1: 新增上传提交方式的参数:method(值为 get 或 post); 修善构造函数可定义主swf(FullAvatarEditor.swf)和快速安装flash的swf(expressInstall.swf)的路径。 发布时间:2014-12-10 v2.0:新增在上传完成时(无论成功和失败),是否显示表示上传结果图标的参数:isShowUploadResultIcon; 新增可自定义原图和头像表单域名称的参数:src_field_name 和 avatar_field_names。 发布时间:2014-04-15 v1.9:修复了原图url中带旋转参数时,另外的上传/加载图片会沿用当前旋转值的错误; 视图参数(__initParams)新增选取框尺寸参数,至此视图已臻佳境。 发布时间:2014-02-25 v1.8:将追加到上传接口url后的参数的提交方式更改为POST,避免参数中含有特殊字符(如base64中的+号)时产生错误。如果之前的版本中有传递额外的参数到上传接口的,更新此版本后请自行修改接口文件中获取参数的方式。如:php的$_GET["x"]换成$_POST["x"]。 修复了将头像颜色调整工具隐藏(avatar_tools_visible=false)时,部分版本的 Flash Player 产生异常的错误。 修复了部分奇葩的图片在编码时产生异常的错误。 发布时间:2014-02-24 v1.7:修复了当加载的原图url中带视图参数(__initParams)时,旋转值未正确初始化的错误; 优化了生成头像的速度。 发布时间:2014-01-03 v1.6:修复了后台只能获取upload_url(上传图片的接口)中首个参数的问题。 提升了生成的头像图片的质量。 发布时间:2013-12-31 v1.5:新增头像保存时的缩放系数(需求大尺寸头像而又不想被其破坏页面布局时很有用); 新增基于原图的初始化参数InitParams(表单字段,用于修改头像时保证视图跟保存头像时一致,帮助提升用户体验)。 发布日期:2013-12-15 v1.4:修复了上传原图时如果是使用摄像头拍照的方式而得到的原图并非来自摄像头的错误。 发布日期:2013-11-13 v1.3:修复头像颜色调整未渲染到生成的图片的bug;新增生成的图片的质量控制参数 quality。 发布日期:2013-11-05 v1.2:新增是否显示头像颜色调整工具的参数 avatar_tools_visible。 发布日期:2013-10-21 v1.1:将各矩形框的参数独立出来,更加方便外观的表现。 发布日期:2013-10-04 v1.0:发布日期:2013-10-01
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值