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