test.js
8.42 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
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);
});