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/Content/hplus/plugins/fullavatareditor/scripts/test.js

231 lines
8.4 KiB
JavaScript

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

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