DS7/BookingWeb/Content/hplus/plugins/fullavatareditor/scripts/test.js

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