fullAvatarEditor富头像上传编辑器

最新推荐文章于 2021-03-22 21:10:15 发布

叼他老牟

最新推荐文章于 2021-03-22 21:10:15 发布

阅读量523

点赞数

分类专栏：前端 JavaScript

JavaScript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

插件介绍

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

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

快速上手

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

<scripttype="text/javascript"src="/scripts/swfobject.js"> </script>
<scripttype="text/javascript"src="/scripts/fullAvatarEditor.js"> </script>

 
     二：调用方法 
    

new fullAvatarEditor(swfContainerID, [height], [width], flashvars, [callback]);

返回值：object，该对象可调用call方法，请参见 call方法。参数

名称	可选	类型	概述
swfContainerID	否	string	用以包裹Flash的HTML元素的ID。
height	是	number	Flash的高度，默认为 600。
width	是	number	Flash的宽度，默认为 630。
flashvars	否	object	将要传递到 flash 的 key/value 参数，请参见 Flashvars 配置参数。
callback	是	function	flash执行某些操作时的回调函数，请参见回调函数

**Flashvars 配置参数**
名称	类型	默认值	描述
id	String	fullAvatarEditor	接收消息的swf的ID，用以区分同一页面如果存在多个组件。
upload_url	String	null	上传图片的接口。该接口需返回一个json字符串，且会原样输出到callback 回调函数的参数对象的属性content中，请参见上传接口的返回数据。
quality	Number	100	生成的头像图片的质量，取值范围1-100，数值越大生成的图片越清晰，相对地文件也会越大。
isShowUploadResultIconv2.0	Boolean	true	在上传完成时（无论成功和失败），是否显示表示上传结果的图标。

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
头像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;

}

});

三：简单示例

 
         <!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