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 = $('
'); for(var i = 0; i < json.content.avatarUrls.length; i++) { html.append('
头像图片'+(i+1)+'
'); } 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); });