You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
232 lines
8.4 KiB
232 lines
8.4 KiB
10 months ago
|
swfobject.addDomLoadEvent(function () {
|
||
|
|
//------------------------------------------------------------------------------示例一
|
||
|
|
var webcamAvailable = false;
|
||
|
|
var currentTab = 'upload';
|
||
|
|
var sourcePic1Url = $.Cookie('swf1');
|
||
|
|
var sourcePic2Url = $.Cookie('swf2');
|
||
|
|
if(sourcePic2Url == null)
|
||
|
|
{
|
||
|
|
sourcePic2Url = "http://www.baidu.com/img/bdlogo.png";
|
||
|
|
}
|
||
|
|
var callback = function (json) {
|
||
|
|
var id = this.id;
|
||
|
|
switch (json.code) {
|
||
|
|
case 2:
|
||
|
|
//如果加载原图成功，说明进入了编辑面板，显示保存和取消按钮，隐藏拍照按钮
|
||
|
|
if (json.type == 0) {
|
||
|
|
if(id == "swf1")
|
||
|
|
{
|
||
|
|
$('#webcamPanelButton').hide();
|
||
|
|
$('#editorPanelButtons').show();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//否则会转到上传面板
|
||
|
|
else {
|
||
|
|
//隐藏所有按钮
|
||
|
|
if(id == "swf1")$('#editorPanelButtons,#webcamPanelButton').hide();
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case 3:
|
||
|
|
//如果摄像头已准备就绪且用户已允许使用，显示拍照按钮。
|
||
|
|
if (json.type == 0) {
|
||
|
|
if(id == "swf1")
|
||
|
|
{
|
||
|
|
$('.button_shutter').removeClass('Disabled');
|
||
|
|
$('#webcamPanelButton').show();
|
||
|
|
webcamAvailable = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if(id == "swf1")
|
||
|
|
{
|
||
|
|
webcamAvailable = false;
|
||
|
|
$('#webcamPanelButton').hide();
|
||
|
|
}
|
||
|
|
//如果摄像头已准备就绪但用户已拒绝使用。
|
||
|
|
if (json.type == 1) {
|
||
|
|
alert('用户拒绝使用摄像头!');
|
||
|
|
}
|
||
|
|
//如果摄像头已准备就绪但摄像头被占用。
|
||
|
|
else {
|
||
|
|
alert('摄像头被占用!');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case 4:
|
||
|
|
alert("您选择的原图片文件大小（" + json.content + "）超出了指定的值(2MB)。");
|
||
|
|
break;
|
||
|
|
case 5:
|
||
|
|
//如果上传成功
|
||
|
|
if (json.type == 0) {
|
||
|
|
var e = this;
|
||
|
|
var html = $('<div class="imgList"/>');
|
||
|
|
for(var i = 0; i < json.content.avatarUrls.length; i++)
|
||
|
|
{
|
||
|
|
html.append('<dl><dt>头像图片'+(i+1)+'</dt><dd><img src="' + json.content.avatarUrls[i] + '" /></dd></dl>');
|
||
|
|
}
|
||
|
|
var button = [];
|
||
|
|
//如果上传了原图，给个修改按钮，感受视图初始化带来的用户体验度提升
|
||
|
|
if(json.content.sourceUrl)
|
||
|
|
{
|
||
|
|
button.push({text : '修改头像', callback:function(){
|
||
|
|
this.close();
|
||
|
|
$.Cookie(id, json.content.sourceUrl);
|
||
|
|
location.reload();
|
||
|
|
//e.call('loadPic', json.content.sourceUrl);
|
||
|
|
}});
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
$.Cookie(id, null);
|
||
|
|
}
|
||
|
|
button.push({text : '关闭窗口'});
|
||
|
|
$.dialog({
|
||
|
|
title:'图片已成功保存至服务器',
|
||
|
|
content:html,
|
||
|
|
button:button,
|
||
|
|
mask:true,
|
||
|
|
draggable:false
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
alert(json.type);
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
var swf1 = new fullAvatarEditor('swf1', 335, {
|
||
|
|
id : 'swf1',
|
||
|
|
upload_url : 'upload.php',
|
||
|
|
src_url : sourcePic1Url, //默认加载的原图片的url
|
||
|
|
tab_visible : false, //不显示选项卡，外部自定义
|
||
|
|
button_visible : false, //不显示按钮，外部自定义
|
||
|
|
src_upload : 2, //是否上传原图片的选项：2-显示复选框由用户选择，0-不上传，1-上传
|
||
|
|
checkbox_visible : false, //不显示复选框，外部自定义
|
||
|
|
browse_box_align : 38, //图片选择框的水平对齐方式。left：左对齐；center：居中对齐；right：右对齐；数值：相对于舞台的x坐标
|
||
|
|
webcam_box_align : 38, //摄像头拍照框的水平对齐方式，如上。
|
||
|
|
avatar_sizes : '258*200', //定义单个头像
|
||
|
|
avatar_sizes_desc :'258*200像素', //头像尺寸的提示文本。
|
||
|
|
browse_box_align:'left', //头像选择框对齐方式
|
||
|
|
webcam_box_align:'left', //头像拍照框对齐方式
|
||
|
|
//头像简介
|
||
|
|
avatar_intro : ' 最终会生成下面这个尺寸的头像',
|
||
|
|
avatar_tools_visible:true //是否显示颜色调整工具
|
||
|
|
}, callback);
|
||
|
|
//选项卡点击事件
|
||
|
|
$('#avatar-tab li').click(function () {
|
||
|
|
if (currentTab != this.id) {
|
||
|
|
currentTab = this.id;
|
||
|
|
$(this).addClass('active');
|
||
|
|
$(this).siblings().removeClass('active');
|
||
|
|
//如果是点击“相册选取”
|
||
|
|
if (this.id === 'albums') {
|
||
|
|
//隐藏flash
|
||
|
|
hideSWF();
|
||
|
|
showAlbums();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
hideAlbums();
|
||
|
|
showSWF();
|
||
|
|
if (this.id === 'webcam') {
|
||
|
|
$('#editorPanelButtons').hide();
|
||
|
|
if (webcamAvailable) {
|
||
|
|
$('.button_shutter').removeClass('Disabled');
|
||
|
|
$('#webcamPanelButton').show();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
//隐藏所有按钮
|
||
|
|
$('#editorPanelButtons,#webcamPanelButton').hide();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
swf1.call('changepanel', this.id);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//复选框事件
|
||
|
|
$('#src_upload').change(function () {
|
||
|
|
swf1.call('srcUpload', this.checked);
|
||
|
|
});
|
||
|
|
//点击上传按钮的事件
|
||
|
|
$('.button_upload').click(function () {
|
||
|
|
swf1.call('upload');
|
||
|
|
});
|
||
|
|
//点击取消按钮的事件
|
||
|
|
$('.button_cancel').click(function () {
|
||
|
|
var activedTab = $('#avatar-tab li.active')[0].id;
|
||
|
|
if (activedTab === 'albums') {
|
||
|
|
hideSWF();
|
||
|
|
showAlbums();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
swf1.call('changepanel', activedTab);
|
||
|
|
if (activedTab === 'webcam') {
|
||
|
|
$('#editorPanelButtons').hide();
|
||
|
|
if (webcamAvailable) {
|
||
|
|
$('.button_shutter').removeClass('Disabled');
|
||
|
|
$('#webcamPanelButton').show();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
//隐藏所有按钮
|
||
|
|
$('#editorPanelButtons,#webcamPanelButton').hide();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//点击拍照按钮的事件
|
||
|
|
$('.button_shutter').click(function () {
|
||
|
|
if (!$(this).hasClass('Disabled')) {
|
||
|
|
$(this).addClass('Disabled');
|
||
|
|
swf1.call('pressShutter');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//从相册中选取
|
||
|
|
$('#userAlbums a').click(function () {
|
||
|
|
var sourcePic = this.href;
|
||
|
|
swf1.call('loadPic', sourcePic);
|
||
|
|
//隐藏相册
|
||
|
|
hideAlbums();
|
||
|
|
//显示flash
|
||
|
|
showSWF();
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
//隐藏flash的函数
|
||
|
|
function hideSWF() {
|
||
|
|
//将宽高设置为0的方式来隐藏flash，而不能使用将其display样式设置为none的方式来隐藏，否则flash将不会被加载，隐藏时储存其宽高，以便后期恢复
|
||
|
|
$('#flash1').data({
|
||
|
|
w: $('#flash1').width(),
|
||
|
|
h: $('#flash1').height()
|
||
|
|
})
|
||
|
|
.css({
|
||
|
|
width: '0px',
|
||
|
|
height: '0px',
|
||
|
|
overflow: 'hidden'
|
||
|
|
});
|
||
|
|
//隐藏所有按钮
|
||
|
|
$('#editorPanelButtons,#webcamPanelButton').hide();
|
||
|
|
}
|
||
|
|
function showSWF() {
|
||
|
|
$('#flash1').css({
|
||
|
|
width: $('#flash1').data('w'),
|
||
|
|
height: $('#flash1').data('h')
|
||
|
|
});
|
||
|
|
}
|
||
|
|
//显示相册的函数
|
||
|
|
function showAlbums() {
|
||
|
|
$('#userAlbums').show();
|
||
|
|
}
|
||
|
|
//隐藏相册的函数
|
||
|
|
function hideAlbums() {
|
||
|
|
$('#userAlbums').hide();
|
||
|
|
}
|
||
|
|
//------------------------------------------------------------------------------示例二
|
||
|
|
var swf2 = new fullAvatarEditor('swf2', {
|
||
|
|
id: 'swf2',
|
||
|
|
upload_url: 'upload.php', //上传图片的接口地址
|
||
|
|
src_url: sourcePic2Url, //默认加载的原图片的url
|
||
|
|
src_upload: 2, //是否上传原图片的选项：2-显示复选框由用户选择，0-不上传，1-上传
|
||
|
|
avatar_scale:2, //头像保存时的缩放系数
|
||
|
|
avatar_intro:'最终头像的尺寸为以下尺寸 * 2(设置的缩放系数)', //头像尺寸的提示文本。其间用"|"号分隔，
|
||
|
|
avatar_sizes_desc:'100*100像素，缩放系数为2，保存后的大小为200*200像素。|50*50像素，缩放系数为2，保存后的大小为100*100像素。|32*32像素，缩放系数为2，保存后的大小为64*64像素。'
|
||
|
|
}, callback);
|
||
|
|
});
|