Javascript-FullAvatarEditor 多功能可拍摄头像上传编辑器

FullAvatarEditor头像上传编辑器支持本地上传、预览、视频拍照等多功能的Flash头像编辑上传插件。上传后，可进行自定义缩放、裁剪、旋转、定位和调色功能，支持自定义原图上传，支持多种接口，兼容性强，跨平台使用。

下面介绍简单的快速入门方法：

1、首先下载必须的文件 地址： http://fullavatareditor.com/download.html ，下载后找到如下图的四个文件。

必须的四个文件

2、在页面中引入fullAvatarEditor.js、swfobject.js两个js文件（前提需先引入jq）

<script type="text/javascript" src="/jslib/fullAvatarEditor/swfobject.js"></script>
<script type="text/javascript" src="/jslib/fullAvatarEditor/fullAvatarEditor.js"></script>

3、在页面中可写如下结构，FullAvatarEditor会先进行一个flash是否安装的判断，如未安装，将显示需要下载安装的提示。反之则直接显示可调用的部分

<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>
</div>

4、具体的调用方法

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

swfContainerID 非必须 string用以包裹Flash的HTML元素的ID。

height 必须 numberFlash的高度，默认为 600。

width 必须 numberFlash的宽度，默认为 630。

flashvars 非必须 object将要传递到 flash 的 key/value 参数，请参见 配置参数。

callback 必须 functionflash执行某些操作时的回调函数，请参见 回调函数。

示例：

swfobject.addDomLoadEvent(function () {
//avatar_sizes : '100*100|50*50|32*32',
 //avatar_sizes_desc : '100*100像素|50*50像素|32*32像素'
var swf = new fullAvatarEditor("/jslib/fullAvatarEditor/fullAvatarEditor.swf", "/jslib/fullAvatarEditor/expressInstall.swf", "swfContainer", {
id : 'swf',
upload_url : '/plus/douploadavatar.html', //上传接口
method : 'post', //传递到上传接口中的查询参数的提交方式。更改该值时，请注意更改上传接口中的查询参数的接收方式
src_upload : 0, //是否上传原图片的选项，有以下值：0-不上传；1-上传；2-显示复选框由用户选择
avatar_box_border_width : 0,
button_visible: true,
checkbox_visible: false,
avatar_sizes : '100*100',
avatar_sizes_desc : '100*100像素'
}, function (msg) {
switch(msg.code)
{
case 1 : //alert("页面成功加载了组件！");
break;
case 2 :
//alert("已成功加载图片到编辑面板。");
//document.getElementById("upload").style.display = "inline";
break;
case 3 :
if(msg.type == 0){
alert("摄像头已准备就绪且用户已允许使用。");
} else if(msg.type == 1) {
alert("摄像头已准备就绪但用户未允许使用！");
} else {
alert("摄像头被占用！");
}
break;
case 5 :
switch(msg.type) {
case 0:
if(msg.content.sourceUrl) {
//alert("原图已成功保存至服务器，url为：\n" +　msg.content.sourceUrl+"\n\n" + "头像已成功保存至服务器，url为：\n" + msg.content.avatarUrls.join("\n\n")+"\n\n传递的userid="+msg.content.userid+"&username="+msg.content.username);
} else {
//alert("头像已成功保存至服务器，url为：\n" + msg.content.avatarUrls.join("\n\n")+"\n\n传递的userid="+msg.content.userid+"&username="+msg.content.username);
}
location.reload();
break;
case 1:
alert('头像上传失败，原因：' + msg.content.msg);
break;
case 2:
alert('头像上传失败，原因：指定的上传地址不存在或有问题！');
break;
case 3:
alert('头像上传失败，原因：发生了安全性错误！请联系站长添加crossdomain.xml到网站根目录。');
break;
}
break;
}
}); //当需要用到自定义上传按钮时使用以下事件
//document.getElementById("upload").onclick=function(){
 // swf.call("upload");
 //};
});

fullAvatarEditor上传界面

fullAvatarEditor编辑界面

fullAvatarEditor摄像头调用界面