demo.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  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 = "samplePictures/Default.jpg";
  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 == "swf2")
  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 == "swf2")
  33. {
  34. $('.button_shutter').removeClass('Disabled');
  35. $('#webcamPanelButton').show();
  36. webcamAvailable = true;
  37. }
  38. }
  39. else {
  40. if(id == "swf2")
  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. switch (json.type)
  93. {
  94. case 1:alert('图片上传失败,接口返回的内容为:'+json.content);break;
  95. case 2:alert('图片上传失败,指定的上传地址不存在或有问题!\n'+json.content);break;
  96. case 3:alert('图片上传失败,发生了安全性错误!\n'+json.content);break;
  97. }
  98. }
  99. break;
  100. }
  101. };
  102. //------------------------------------------------------------------------------示例一
  103. var swf1 = new fullAvatarEditor('swf1', {
  104. id: 'swf1',
  105. upload_url: 'upload.php', //上传图片的接口地址
  106. src_url: sourcePic2Url, //默认加载的原图片的url
  107. src_upload: 2, //是否上传原图片的选项:2-显示复选框由用户选择,0-不上传,1-上传
  108. avatar_scale:2, //头像保存时的缩放系数
  109. avatar_intro:'最终头像的尺寸为以下尺寸 * 2(设置的缩放系数)', //头像尺寸的提示文本。其间用"|"号分隔,
  110. avatar_sizes_desc:'100*100像素,缩放系数为2,保存后的大小为200*200像素。|50*50像素,缩放系数为2,保存后的大小为100*100像素。|32*32像素,缩放系数为2,保存后的大小为64*64像素。'
  111. }, callback);
  112. var swf2 = new fullAvatarEditor('swf2', 335, {
  113. id : 'swf2',
  114. upload_url: 'upload.php?size_number=1', //上传图片的接口地址
  115. method :'post',
  116. src_url : sourcePic1Url, //默认加载的原图片的url
  117. tab_visible : false, //不显示选项卡,外部自定义
  118. button_visible : false, //不显示按钮,外部自定义
  119. src_upload : 2, //是否上传原图片的选项:2-显示复选框由用户选择,0-不上传,1-上传
  120. checkbox_visible : false, //不显示复选框,外部自定义
  121. browse_box_align : 38, //图片选择框的水平对齐方式。left:左对齐;center:居中对齐;right:右对齐;数值:相对于舞台的x坐标
  122. webcam_box_align : 38, //摄像头拍照框的水平对齐方式,如上。
  123. avatar_sizes : '258*200', //定义单个头像
  124. avatar_sizes_desc :'258*200像素', //头像尺寸的提示文本
  125. isShowUploadResultIcon:false, //在上传完成时(无论成功和失败),是否显示表示上传结果的图标。
  126. //头像简介
  127. avatar_intro : ' 最终会生成下面这个尺寸的头像',
  128. avatar_tools_visible:true //是否显示颜色调整工具
  129. }, callback);
  130. //选项卡点击事件
  131. $('dt').click(function () {
  132. if (currentTab != this.id) {
  133. currentTab = this.id;
  134. $(this).addClass('current');
  135. $(this).siblings().removeClass('current');
  136. //如果是点击“相册选取”
  137. if (this.id === 'albums') {
  138. //隐藏flash
  139. hideSWF();
  140. showAlbums();
  141. }
  142. else {
  143. hideAlbums();
  144. showSWF();
  145. if (this.id === 'webcam') {
  146. $('#editorPanelButtons').hide();
  147. if (webcamAvailable) {
  148. $('.button_shutter').removeClass('Disabled');
  149. $('#webcamPanelButton').show();
  150. }
  151. }
  152. else {
  153. //隐藏所有按钮
  154. $('#editorPanelButtons,#webcamPanelButton').hide();
  155. }
  156. }
  157. swf2.call('changepanel', this.id);
  158. }
  159. });
  160. //复选框事件
  161. $('#src_upload').change(function () {
  162. swf2.call('srcUpload', this.checked);
  163. });
  164. //点击上传按钮的事件
  165. $('.button_upload').click(function () {
  166. swf2.call('upload');
  167. });
  168. //点击取消按钮的事件
  169. $('.button_cancel').click(function () {
  170. var activedTab = $('dt.current')[0].id;
  171. if (activedTab === 'albums') {
  172. hideSWF();
  173. showAlbums();
  174. }
  175. else {
  176. swf2.call('changepanel', activedTab);
  177. if (activedTab === 'webcam') {
  178. $('#editorPanelButtons').hide();
  179. if (webcamAvailable) {
  180. $('.button_shutter').removeClass('Disabled');
  181. $('#webcamPanelButton').show();
  182. }
  183. }
  184. else {
  185. //隐藏所有按钮
  186. $('#editorPanelButtons,#webcamPanelButton').hide();
  187. }
  188. }
  189. });
  190. //点击拍照按钮的事件
  191. $('.button_shutter').click(function () {
  192. if (!$(this).hasClass('Disabled')) {
  193. $(this).addClass('Disabled');
  194. swf2.call('pressShutter');
  195. }
  196. });
  197. //从相册中选取
  198. $('#userAlbums a').click(function () {
  199. var sourcePic = this.href;
  200. swf2.call('loadPic', sourcePic);
  201. //隐藏相册
  202. hideAlbums();
  203. //显示flash
  204. showSWF();
  205. return false;
  206. });
  207. //隐藏flash的函数
  208. function hideSWF() {
  209. //将宽高设置为0的方式来隐藏flash,而不能使用将其display样式设置为none的方式来隐藏,否则flash将不会被加载,隐藏时储存其宽高,以便后期恢复
  210. $('#flash').data({
  211. w: $('#flash').width(),
  212. h: $('#flash').height()
  213. })
  214. .css({
  215. width: '0px',
  216. height: '0px',
  217. overflow: 'hidden'
  218. });
  219. //隐藏所有按钮
  220. $('#editorPanelButtons,#webcamPanelButton').hide();
  221. }
  222. function showSWF() {
  223. $('#flash').css({
  224. width: $('#flash').data('w'),
  225. height: $('#flash').data('h')
  226. });
  227. }
  228. //显示相册的函数
  229. function showAlbums() {
  230. $('#userAlbums').show();
  231. }
  232. //隐藏相册的函数
  233. function hideAlbums() {
  234. $('#userAlbums').hide();
  235. }
  236. });