You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
DS7/BookingJieFeng/pub/Content/hplus/plugins/fullavatareditor/scripts/test.js

231 lines
8.4 KiB
JavaScript

2 years 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);
});