我爱模板网 > 特效插件 > 图像特效 >  富头像上传编辑器 FullAvatar Editor正文

富头像上传编辑器 FullAvatar Editor

特效介绍



    富头像上传编辑器 FullAvatar Editor是一款支持本地上传、预览、视频拍照和网络加载的flash头像编辑上传插件,可缩放、裁剪、旋转、定位和调色等。

    小巧的身材:文件大小仅仅只有 48 KB,而新浪的头像编辑器组件有 58.1 KB,更有甚者达 80 KB 之多。
    漂亮的外观:灰色系的外观设计,适用于所有风格的站点。还可轻松地实现换肤。
    强大的功能:原图支持本地上传、视频拍照和网络加载,图片编辑有缩放、裁剪、旋转、定位和调色等功能。
    丰富的接口:可自定义头像(大小、数目...)、所有文本(包括其字体,大小,颜色,方便扩展多语言站点)、可在外部接口中定义选项卡、按钮...
    跨平台兼容:运行环境Flash Player 10.1+,任何浏览器 IE All、Firefox、 Chrome、Opera...都正常使用。
    极致的体验:人性化的设计方式,细节上精心的处理,用户使用起来得心应手。

使用方法
一、快速上手

下载插件包解压后,在页面的 head 标签内引入以下脚本文件

<script type="text/javascript" src="/scripts/swfobject.js"></script>
<script type="text/javascript" src="/scripts/fullAvatarEditor.js"></script>
二、调用方法
new fullAvatarEditor(['*/FullAvatarEditor.swf',] ['*/expressInstall.swf',] swfContainerID [,height] [,width], flashvars, [callback]);
返回值:object,该对象可调用call方法,请参见 call方法。
参数
名称 可选 类型 概述
*/FullAvatarEditor.swf string 插件主swf文件的路径,文件名必须是FullAvatarEditor.swf
*/expressInstall.swf string expressInstall.swf文件的路径,文件名必须是expressInstall.swf
swfContainerID string 用以包裹Flash的HTML元素的ID。
height number Flash的高度,默认为 600
width number Flash的宽度,默认为 630
flashvars object 将要传递到 flash 的 key/value 参数。
callback function flash执行某些操作时的回调函数。
三、简单实例
<!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("fullAvatarEditor.swf", "expressInstall.swf", "swfContainer", {
                        id : "swf",
                        upload_url : "/upload.php?userid=999&username=looselive",
                        method : "post",
                        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").onclick=function(){
                    swf.call("upload");
                };
            });
        </script>
    </body>
</html>

进一步使用:


调用方法
  • new fullAvatarEditor(['*/FullAvatarEditor.swf',] ['*/expressInstall.swf',] swfContainerID [,height] [,width], flashvars, [callback]);
  • 返回值:object,该对象可调用call方法,请参见 call方法。
*/FullAvatarEditor.swf(string,可选)
  • 插件主swf文件的路径,文件名必须是FullAvatarEditor.swf。
*/expressInstall.swf(string,可选)
  • expressInstall.swf文件的路径,文件名必须是expressInstall.swf。
swfContainerID(string,必须)
  • 用以包裹Flash的HTML元素的ID。
height(uint,可选)
  • Flash的高度,默认为 600。
width(uint,可选)
  • Flash的宽度,默认为 630。
flashvars 配置参数(object,必须)
名称 类型 默认值 描述
id String fullAvatarEditor 接收消息的swf的ID,用以区分同一页面如果存在多个组件。
upload_url String null 上传图片的接口。该接口需返回一个json字符串,且会原样输出到 callback 回调函数 的参数对象的属性content中,请参见 上传接口的返回数据。
methodv2.1 String get 上传提交的方式,值为 get 或 post,不分大小写。
quality Number 100 生成的头像图片的质量,取值范围1-100,数值越大生成的图片越清晰,相对地文件也会越大。
isShowUploadResultIconv2.0 Boolean true 在上传完成时(无论成功和失败),是否显示表示上传结果的图标。
原图片
src_url String
默认加载的原图片的url。
src_size String 2MB 选择的本地图片文件所允许的最大值,必须带单位,如888Byte,88KB,8MB
src_upload Number 0 是否上传原图片的选项,有以下值:
0 ---不上传
1 ---上传
2 ---显示复选框由用户选择
src_field_namev2.0 String __source 原图片的表单域名称,上传原图片时可用。
src_size_over_limit String 文件大小({0})超出限制(2MB)\n请重新上传 当选择的原图片文件的大小超出指定最大值时的提示文本。
可使用占位符{0}表示选择的原图片文件的大小。
src_size_over_limit_font String
上一项的字体。
src_size_over_limit_font_size String 14 上一项的字体大小(单位:px)。
src_box_width Number 300 原图编辑框的宽度。
src_box_height Number 300 原图编辑框的高度。
src_box_background String #fff 原图编辑框的背景颜色。格式如:#888,#888888
src_box_border_width Number 1 原图编辑框的边框宽度。
src_box_border_color String #D8D8D8 原图编辑框的边框颜色。格式如:#888,#888888
选项卡
tab_visible Boolean true 是否显示选项卡。
tab_font String
选项卡的字体。
tab_font_size Number 14 选项卡的字体大小(单位:px)。
tab_color String #666 选项卡的文本颜色。格式如:#888,#888888
tab_upload_text String 上传本地照 本地上传选项卡的文本。
tab_webcam_text String 摄像头拍照 摄像头拍照选项卡的文本。
tab_upload_width Number 0(表示自适应) 本地上传选项卡的宽度。
tab_webcam_width Number 0(表示自适应) 摄像头拍照选项卡的宽度。
tab_active String upload 默认激活的选项卡。
upload----表示本地上传选项卡;
webcam---表示摄像头拍照选项卡。
图片选择框
browse_box_width Number 300 图片选择框的宽度。
browse_box_height Number 300 图片选择框的高度。
browse_box_background String #fff 图片选择框的背景颜色。格式如:#888,#888888
browse_box_border_width Number 1 图片选择框的边框宽度。
browse_box_border_color String #D8D8D8 图片选择框的边框颜色。格式如:#888,#888888
browse_box_align String center 图片选择框的水平对齐方式。有如下值:
left:左对齐
center:居中对齐
right:右对齐,
数值:相对于舞台的x坐标
browse_button String 请点击按钮选择图片 选择图片按钮的文本。
browse_button_color String #000 选择图片按钮的文本颜色。格式如:#888,#888888
browse_button_font String
选择图片按钮的文本字体。
browse_button_font_size Number 14 选择图片按钮的文本字体大小(单位:px)。
browse_button_y Number 20 选择图片按钮相对于图片选择框的 y 坐标。
browse_tip String 仅支持JPG、JPEG、GIF、PNG格式的图片文件\n文件不能大于2MB 选择图片的规则提示文本。
browse_tip_color String #888 上一项的颜色。格式如:#888,#888888
browse_tip_font String
选择图片的规则提示文本的字体。
browse_tip_font_size Number 14 选择图片的规则提示文本的字体大小(单位:px)。
browse_tip_y Number 250 选择图片的规则提示文本相对于图片选择框的 y 坐标。
按钮和复选框
button_visible Boolean true 是否显示保存、取消、拍照按钮。
button_color String #666 按钮文本的颜色。格式如:#888,#888888
button_font String
按钮文本的字体。
button_font_size Number 14 按钮文本的字体大小(单位:px)。
button_upload_text String 保存 上传按钮的文本。
button_upload_width Number 0(表示自适应) 上传按钮的宽度。
button_cancel_text String 取消 取消按钮的文本。
button_cancel_width Number 0(表示自适应) 取消按钮的宽度。
button_shutter_text String 拍照 拍照按钮的文本。
button_shutter_width Number 0(表示自适应) 拍照按钮的宽度。
checkbox_visible Boolean false 是否上传原图片的复选框的可见性。
checkbox_text String 是否上传原图片? 是否上传原图片的复选框的文本。
checkbox_color String #666 是否上传原图片的复选框的文本颜色。格式如:#888,#888888
checkbox_font String
是否上传原图片的复选框的文本字体。
checkbox_font_size Number 14 是否上传原图片的复选框的文本字体的大小(单位:px)。
头像
avatar_box_border_color String #D8D8D8 头像框的边框颜色。格式如:#888,#888888
avatar_box_border_width Number 1 头像框的边框宽度。
avatar_sizes String 100*100|50*50|32*32 表示一组或多组头像的尺寸。其间用"|"号分隔。
avatar_sizes_desc String 100*100像素|50*50像素|32*32像素 头像尺寸的提示文本。多个用"|"号分隔,与上一项对应。
avatar_field_namesv2.0 String __avatar1|__avatar2|__avatar3 头像的表单域名称,多个用"|"号分隔,与 avatar_sizes 项对应。
avatar_intro String 最终会生成以下尺寸的头像,请注意是否清晰 头像简介。
avatar_intro_color String #666 头像简介文本的颜色。格式如:#888,#888888
avatar_intro_font String
头像简介文本的字体。
avatar_intro_font_size Number 14 头像简介文本的字体大小(单位:px)。
avatar_tools_visible Boolean true 是否显示头像颜色调整工具。
avatar_tools_brightness_text String 亮度 头像颜色调整工具-亮度的文本。
avatar_tools_contrast_text String 对比度 头像颜色调整工具-对比度的文本。
avatar_tools_saturation_text String 饱和度 头像颜色调整工具-饱和度的文本。
avatar_tools_color String #666 头像颜色调整工具的文本的颜色。格式如:#888,#888888
avatar_tools_font String
头像颜色调整工具的文本字体。
avatar_tools_font_size Number 14 头像颜色调整工具的文本字体大小(单位:px)。
avatar_scale Number 1 头像保存时的缩放系数。如:默认的头像分别为100*100、50*50、32*32像素,如果该参数为2,那么保存后的头像的尺寸 将为200*200、100*100、64*64像素(即头像大小乘以缩放系数)。该参数在为免头像过大而把页面撑破、破坏页面布局时很有用。
摄像头相关
webcam_box_width Number 300 视频框的宽度。
webcam_box_height Number 300 视频框的高度。
webcam_box_background String #fff 视频框的背景颜色。格式如:#888,#888888
webcam_box_border_width Number 1 视频框的边框宽度。
webcam_box_border_color String #D8D8D8 视频框的边框颜色。格式如:#888,#888888
webcam_box_align String center 视频框的水平对齐方式。有如下值:
left:左对齐
center:居中对齐
right:右对齐,
数值:相对于舞台的x坐标
webcam_unavailable_title String 发生错误,可能的原因如下 摄像头不可用的标题。
webcam_unavailable_title_color String #666 摄像头不可用的标题的颜色。格式如:#888,#888888。
webcam_unavailable_title_font String
摄像头不可用的标题的字体。
webcam_unavailable_title_font_size Number 14 摄像头不可用的标题的字体大小(单位:px)。
webcam_unavailable_content String 您还没有安装摄像头;\n\n您的摄像头正被其他程序所占用;\n\n您的摄像头已被拔出。 摄像头不可用的描述。
webcam_unavailable_content_color String #888 摄像头不可用的描述文本的颜色。格式如:#888,#888888。
webcam_unavailable_content_font String
摄像头不可用的描述文本的字体。
webcam_unavailable_content_font_size Number 14 摄像头不可用的描述文本的字体大小(单位:px)。
webcam_unavailable_refresh String 请确认摄像头可用后点此刷新进行尝试 摄像头不可用时的刷新链接的文本。
webcam_unavailable_refresh_color String #666 摄像头不可用时的刷新链接的文本颜色。格式如:#888,#888888。
webcam_unavailable_refresh_font String
摄像头不可用时的刷新链接的文本字体。
webcam_unavailable_refresh_font_size Number 14 摄像头不可用时的刷新链接的文本字体大小(单位:px)。
webcam_muted_title String 您选择了拒绝使用摄像头 拒绝使用摄像头时的标题。
webcam_muted_title_color String #666 拒绝使用摄像头时的标题的颜色。格式如:#888,#888888。
webcam_muted_title_font String
拒绝使用摄像头时的标题的字体。
webcam_muted_title_font_size Number 14 拒绝使用摄像头时的标题的字体大小(单位:px)。
webcam_muted_content String 若要启用摄像头,\n\n请打开 Flash Player 设置对话框,\n\n并在弹出的对话框中选择允许。 拒绝使用摄像头时的描述。
webcam_muted_content_color String #888 拒绝使用摄像头时的描述文本的颜色。格式如:#888,#888888。
webcam_muted_content_font String
拒绝使用摄像头时的描述文本的字体。
webcam_muted_content_font_size Number 14 拒绝使用摄像头时的描述文本的字体大小(单位:px)。
webcam_muted_enable String 点击此处打开 Flash Player 设置对话框 启用摄像头的链接文本。
webcam_muted_enable_color String #666 启用摄像头的链接文本的颜色。格式如:#888,#888888。
webcam_muted_enable_font String
启用摄像头的链接文本的字体。
webcam_muted_enable_font_size Number 14 启用摄像头的链接文本的字体大小(单位:px)。
提示文本
tooltip_color String #666 提示文本的颜色。格式如:#888,#888888
tooltip_font String
提示文本的字体。
tooltip_font_size Number 14 提示文本的字体大小(单位:px)。
tooltip_zoomIn String 放大 放大工具的提示文本。
tooltip_zoomOut String 缩小 缩小工具的提示文本。
tooltip_zoomNone String 按窗口大小显示 按窗口大小显示的提示文本。
tooltip_rotateCW String 顺时针旋转 顺时针旋转工具的提示文本。
tooltip_rotateCCW String 逆时针旋转 逆时针旋转工具的提示文本。
tooltip_reset String 重置 头像颜色调整的重置按钮的提示文本。
callback 回调函数
  • 执行该函数时,函数中的this关键字指向表示swf的HTMLObjectElement,并且会给函数传递一个表示事件消息的json对象作为参数。
  • json对象的属性如下:
  • code : Number主要用来辨识消息的具体来源和内容,以便客户端知道如何处理。
  • type : Number0 表示成功,1 表示警告,2 表示错误,3 表示异常。
  • content : *表示消息的内容。
可能值枚举表
code type content 描述
1 0
页面成功加载组件后触发的事件消息。
2
  • 0
  • 2

  • 加载图片成功时触发的事件消息。
  • 加载图片失败时触发的事件消息。
3
  • 0
  • 1
  • 2

  • 摄像头已准备就绪且用户已允许使用。
  • 摄像头已准备就绪但用户未允许使用!
  • 摄像头被占用!
4 2 选择的原图片文件大小,带单位。如:8.88MB 选择的原图片文件大小超出了指定的值。
5
  • 0
  • 1
  • 2
  • 3
  • 上传接口返回的内容。
  • 表示错误原因的字符串。
  • 表示图片上传成功。
  • 表示图片上传失败,失败原因由上传接口定义!
  • 表示图片上传失败,指定的上传地址不存在或有问题!
  • 表示图片上传失败,发生了安全性错误!
call 方法,这些方法在自定义外界元素(如tab、button)时很有用。
  • object.call(methodName[, methodParameter]);
methodName:String 要调用的flash内的方法名称。
methodParameter:String 传递到该方法的参数。
  • 该方法供 new fullAvatarEditor 返回的对象(HTMLObjectElement)调用,主要是调用flash里的方法。
可调用的方法枚举表
methodName methodParameter 功能描述
changePanel upload 或 webcam 切换到本地上传图片选择面板或摄像头拍照面板。
loadPic 要加载的图片的url。 加载网络图片。
pressShutter
执行拍照操作。
srcUpload true|false 设置是否上传原图片。
upload
执行上传保存的操作。
发送至上传接口的数据
发送方式: post
原图file域: Field Name: __source
File Name: 如果是本地和网络图片为原始文件名、如果是摄像头拍照则为 *FromWebcam.jpg
头像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;
        }
    }
});


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:基于html5的AlloyPhoto在线图片处理 下一篇:smartZoom图片缩放插件
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢