test.js 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. swfobject.addDomLoadEvent(function () {
  2. //------------------------------------------------------------------------------示例一
  3. var webcamAvailable = false;
  4. var currentTab = 'upload';
  5. var sourcePic1Url = $.Cookie('swf1');
  6. var sourcePic2Url = $.Cookie('swf2');
  7. if(sourcePic2Url == null)
  8. {
  9. sourcePic2Url = "http://www.baidu.com/img/bdlogo.png";
  10. }
  11. var callback = function (json) {
  12. var id = this.id;
  13. switch (json.code) {
  14. case 2:
  15. //如果加载原图成功,说明进入了编辑面板,显示保存和取消按钮,隐藏拍照按钮
  16. if (json.type == 0) {
  17. if(id == "swf1")
  18. {
  19. $('#webcamPanelButton').hide();
  20. $('#editorPanelButtons').show();
  21. }
  22. }
  23. //否则会转到上传面板
  24. else {
  25. //隐藏所有按钮
  26. if(id == "swf1")$('#editorPanelButtons,#webcamPanelButton').hide();
  27. }
  28. break;
  29. case 3:
  30. //如果摄像头已准备就绪且用户已允许使用,显示拍照按钮。
  31. if (json.type == 0) {
  32. if(id == "swf1")
  33. {
  34. $('.button_shutter').removeClass('Disabled');
  35. $('#webcamPanelButton').show();
  36. webcamAvailable = true;
  37. }
  38. }
  39. else {
  40. if(id == "swf1")
  41. {
  42. webcamAvailable = false;
  43. $('#webcamPanelButton').hide();
  44. }
  45. //如果摄像头已准备就绪但用户已拒绝使用。
  46. if (json.type == 1) {
  47. alert('用户拒绝使用摄像头!');
  48. }
  49. //如果摄像头已准备就绪但摄像头被占用。
  50. else {
  51. alert('摄像头被占用!');
  52. }
  53. }
  54. break;
  55. case 4:
  56. alert("您选择的原图片文件大小(" + json.content + ")超出了指定的值(2MB)。");
  57. break;
  58. case 5:
  59. //如果上传成功
  60. if (json.type == 0) {
  61. var e = this;
  62. var html = $('<div class="imgList"/>');
  63. for(var i = 0; i < json.content.avatarUrls.length; i++)
  64. {
  65. html.append('<dl><dt>头像图片'+(i+1)+'</dt><dd><img src="' + json.content.avatarUrls[i] + '" /></dd></dl>');
  66. }
  67. var button = [];
  68. //如果上传了原图,给个修改按钮,感受视图初始化带来的用户体验度提升
  69. if(json.content.sourceUrl)
  70. {
  71. button.push({text : '修改头像', callback:function(){
  72. this.close();
  73. $.Cookie(id, json.content.sourceUrl);
  74. location.reload();
  75. //e.call('loadPic', json.content.sourceUrl);
  76. }});
  77. }
  78. else
  79. {
  80. $.Cookie(id, null);
  81. }
  82. button.push({text : '关闭窗口'});
  83. $.dialog({
  84. title:'图片已成功保存至服务器',
  85. content:html,
  86. button:button,
  87. mask:true,
  88. draggable:false
  89. });
  90. }
  91. else {
  92. alert(json.type);
  93. }
  94. break;
  95. }
  96. };
  97. var swf1 = new fullAvatarEditor('swf1', 335, {
  98. id : 'swf1',
  99. upload_url : 'upload.php',
  100. src_url : sourcePic1Url, //默认加载的原图片的url
  101. tab_visible : false, //不显示选项卡,外部自定义
  102. button_visible : false, //不显示按钮,外部自定义
  103. src_upload : 2, //是否上传原图片的选项:2-显示复选框由用户选择,0-不上传,1-上传
  104. checkbox_visible : false, //不显示复选框,外部自定义
  105. browse_box_align : 38, //图片选择框的水平对齐方式。left:左对齐;center:居中对齐;right:右对齐;数值:相对于舞台的x坐标
  106. webcam_box_align : 38, //摄像头拍照框的水平对齐方式,如上。
  107. avatar_sizes : '258*200', //定义单个头像
  108. avatar_sizes_desc :'258*200像素', //头像尺寸的提示文本。
  109. browse_box_align:'left', //头像选择框对齐方式
  110. webcam_box_align:'left', //头像拍照框对齐方式
  111. //头像简介
  112. avatar_intro : ' 最终会生成下面这个尺寸的头像',
  113. avatar_tools_visible:true //是否显示颜色调整工具
  114. }, callback);
  115. //选项卡点击事件
  116. $('#avatar-tab li').click(function () {
  117. if (currentTab != this.id) {
  118. currentTab = this.id;
  119. $(this).addClass('active');
  120. $(this).siblings().removeClass('active');
  121. //如果是点击“相册选取”
  122. if (this.id === 'albums') {
  123. //隐藏flash
  124. hideSWF();
  125. showAlbums();
  126. }
  127. else {
  128. hideAlbums();
  129. showSWF();
  130. if (this.id === 'webcam') {
  131. $('#editorPanelButtons').hide();
  132. if (webcamAvailable) {
  133. $('.button_shutter').removeClass('Disabled');
  134. $('#webcamPanelButton').show();
  135. }
  136. }
  137. else {
  138. //隐藏所有按钮
  139. $('#editorPanelButtons,#webcamPanelButton').hide();
  140. }
  141. }
  142. swf1.call('changepanel', this.id);
  143. }
  144. });
  145. //复选框事件
  146. $('#src_upload').change(function () {
  147. swf1.call('srcUpload', this.checked);
  148. });
  149. //点击上传按钮的事件
  150. $('.button_upload').click(function () {
  151. swf1.call('upload');
  152. });
  153. //点击取消按钮的事件
  154. $('.button_cancel').click(function () {
  155. var activedTab = $('#avatar-tab li.active')[0].id;
  156. if (activedTab === 'albums') {
  157. hideSWF();
  158. showAlbums();
  159. }
  160. else {
  161. swf1.call('changepanel', activedTab);
  162. if (activedTab === 'webcam') {
  163. $('#editorPanelButtons').hide();
  164. if (webcamAvailable) {
  165. $('.button_shutter').removeClass('Disabled');
  166. $('#webcamPanelButton').show();
  167. }
  168. }
  169. else {
  170. //隐藏所有按钮
  171. $('#editorPanelButtons,#webcamPanelButton').hide();
  172. }
  173. }
  174. });
  175. //点击拍照按钮的事件
  176. $('.button_shutter').click(function () {
  177. if (!$(this).hasClass('Disabled')) {
  178. $(this).addClass('Disabled');
  179. swf1.call('pressShutter');
  180. }
  181. });
  182. //从相册中选取
  183. $('#userAlbums a').click(function () {
  184. var sourcePic = this.href;
  185. swf1.call('loadPic', sourcePic);
  186. //隐藏相册
  187. hideAlbums();
  188. //显示flash
  189. showSWF();
  190. return false;
  191. });
  192. //隐藏flash的函数
  193. function hideSWF() {
  194. //将宽高设置为0的方式来隐藏flash,而不能使用将其display样式设置为none的方式来隐藏,否则flash将不会被加载,隐藏时储存其宽高,以便后期恢复
  195. $('#flash1').data({
  196. w: $('#flash1').width(),
  197. h: $('#flash1').height()
  198. })
  199. .css({
  200. width: '0px',
  201. height: '0px',
  202. overflow: 'hidden'
  203. });
  204. //隐藏所有按钮
  205. $('#editorPanelButtons,#webcamPanelButton').hide();
  206. }
  207. function showSWF() {
  208. $('#flash1').css({
  209. width: $('#flash1').data('w'),
  210. height: $('#flash1').data('h')
  211. });
  212. }
  213. //显示相册的函数
  214. function showAlbums() {
  215. $('#userAlbums').show();
  216. }
  217. //隐藏相册的函数
  218. function hideAlbums() {
  219. $('#userAlbums').hide();
  220. }
  221. //------------------------------------------------------------------------------示例二
  222. var swf2 = new fullAvatarEditor('swf2', {
  223. id: 'swf2',
  224. upload_url: 'upload.php', //上传图片的接口地址
  225. src_url: sourcePic2Url, //默认加载的原图片的url
  226. src_upload: 2, //是否上传原图片的选项:2-显示复选框由用户选择,0-不上传,1-上传
  227. avatar_scale:2, //头像保存时的缩放系数
  228. avatar_intro:'最终头像的尺寸为以下尺寸 * 2(设置的缩放系数)', //头像尺寸的提示文本。其间用"|"号分隔,
  229. avatar_sizes_desc:'100*100像素,缩放系数为2,保存后的大小为200*200像素。|50*50像素,缩放系数为2,保存后的大小为100*100像素。|32*32像素,缩放系数为2,保存后的大小为64*64像素。'
  230. }, callback);
  231. });