富头像上传编辑器 FullAvatar Editor_图片特效,图片zoom特效,图片无缝滚动,图片tab选项卡特效免费下载_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

特效介绍

富头像上传编辑器 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	100100\|5050\|32*32	表示一组或多组头像的尺寸。其间用"\|"号分隔。
avatar_sizes_desc	String	100100像素\|5050像素\|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	头像保存时的缩放系数。如：默认的头像分别为100100、5050、3232像素，如果该参数为2，那么保存后的头像的尺寸将为200200、100100、6464像素（即头像大小乘以缩放系数）。该参数在为免头像过大而把页面撑破、破坏页面布局时很有用。
*摄像头相关*
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;
        }
    }
});

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！

富头像上传编辑器 FullAvatar Editor

猜你喜欢