scrawl.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671
  1. /**
  2. * Created with JetBrains PhpStorm.
  3. * User: xuheng
  4. * Date: 12-5-22
  5. * Time: 上午11:38
  6. * To change this template use File | Settings | File Templates.
  7. */
  8. var scrawl = function (options) {
  9. options && this.initOptions(options);
  10. };
  11. (function () {
  12. var canvas = $G("J_brushBoard"),
  13. context = canvas.getContext('2d'),
  14. drawStep = [], //undo redo存储
  15. drawStepIndex = 0; //undo redo指针
  16. scrawl.prototype = {
  17. isScrawl:false, //是否涂鸦
  18. brushWidth:-1, //画笔粗细
  19. brushColor:"", //画笔颜色
  20. initOptions:function (options) {
  21. var me = this;
  22. me.originalState(options);//初始页面状态
  23. me._buildToolbarColor(options.colorList);//动态生成颜色选择集合
  24. me._addBoardListener(options.saveNum);//添加画板处理
  25. me._addOPerateListener(options.saveNum);//添加undo redo clearBoard处理
  26. me._addColorBarListener();//添加颜色选择处理
  27. me._addBrushBarListener();//添加画笔大小处理
  28. me._addEraserBarListener();//添加橡皮大小处理
  29. me._addAddImgListener();//添加增添背景图片处理
  30. me._addRemoveImgListenter();//删除背景图片处理
  31. me._addScalePicListenter();//添加缩放处理
  32. me._addClearSelectionListenter();//添加清楚选中状态处理
  33. me._originalColorSelect(options.drawBrushColor);//初始化颜色选中
  34. me._originalBrushSelect(options.drawBrushSize);//初始化画笔选中
  35. me._clearSelection();//清楚选中状态
  36. },
  37. originalState:function (options) {
  38. var me = this;
  39. me.brushWidth = options.drawBrushSize;//同步画笔粗细
  40. me.brushColor = options.drawBrushColor;//同步画笔颜色
  41. context.lineWidth = me.brushWidth;//初始画笔大小
  42. context.strokeStyle = me.brushColor;//初始画笔颜色
  43. context.fillStyle = "transparent";//初始画布背景颜色
  44. context.lineCap = "round";//去除锯齿
  45. context.fill();
  46. },
  47. _buildToolbarColor:function (colorList) {
  48. var tmp = null, arr = [];
  49. arr.push("<table id='J_colorList'>");
  50. for (var i = 0, color; color = colorList[i++];) {
  51. if ((i - 1) % 5 == 0) {
  52. if (i != 1) {
  53. arr.push("</tr>");
  54. }
  55. arr.push("<tr>");
  56. }
  57. tmp = '#' + color;
  58. arr.push("<td><a title='" + tmp + "' href='javascript:void(0)' style='background-color:" + tmp + "'></a></td>");
  59. }
  60. arr.push("</tr></table>");
  61. $G("J_colorBar").innerHTML = arr.join("");
  62. },
  63. _addBoardListener:function (saveNum) {
  64. var me = this,
  65. margin = 0,
  66. startX = -1,
  67. startY = -1,
  68. isMouseDown = false,
  69. isMouseMove = false,
  70. isMouseUp = false,
  71. buttonPress = 0, button, flag = '';
  72. margin = parseInt(domUtils.getComputedStyle($G("J_wrap"), "margin-left"));
  73. drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
  74. drawStepIndex += 1;
  75. domUtils.on(canvas, ["mousedown", "mousemove", "mouseup", "mouseout"], function (e) {
  76. button = browser.webkit ? e.which : buttonPress;
  77. switch (e.type) {
  78. case 'mousedown':
  79. buttonPress = 1;
  80. flag = 1;
  81. isMouseDown = true;
  82. isMouseUp = false;
  83. isMouseMove = false;
  84. me.isScrawl = true;
  85. startX = e.clientX - margin;//10为外边距总和
  86. startY = e.clientY - margin;
  87. context.beginPath();
  88. break;
  89. case 'mousemove' :
  90. if (!flag && button == 0) {
  91. return;
  92. }
  93. if (!flag && button) {
  94. startX = e.clientX - margin;//10为外边距总和
  95. startY = e.clientY - margin;
  96. context.beginPath();
  97. flag = 1;
  98. }
  99. if (isMouseUp || !isMouseDown) {
  100. return;
  101. }
  102. var endX = e.clientX - margin,
  103. endY = e.clientY - margin;
  104. context.moveTo(startX, startY);
  105. context.lineTo(endX, endY);
  106. context.stroke();
  107. startX = endX;
  108. startY = endY;
  109. isMouseMove = true;
  110. break;
  111. case 'mouseup':
  112. buttonPress = 0;
  113. if (!isMouseDown)return;
  114. if (!isMouseMove) {
  115. context.arc(startX, startY, context.lineWidth, 0, Math.PI * 2, false);
  116. context.fillStyle = context.strokeStyle;
  117. context.fill();
  118. }
  119. context.closePath();
  120. me._saveOPerate(saveNum);
  121. isMouseDown = false;
  122. isMouseMove = false;
  123. isMouseUp = true;
  124. startX = -1;
  125. startY = -1;
  126. break;
  127. case 'mouseout':
  128. flag = '';
  129. buttonPress = 0;
  130. if (button == 1) return;
  131. context.closePath();
  132. break;
  133. }
  134. });
  135. },
  136. _addOPerateListener:function (saveNum) {
  137. var me = this;
  138. domUtils.on($G("J_previousStep"), "click", function () {
  139. if (drawStepIndex > 1) {
  140. drawStepIndex -= 1;
  141. context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  142. context.putImageData(drawStep[drawStepIndex - 1], 0, 0);
  143. me.btn2Highlight("J_nextStep");
  144. drawStepIndex == 1 && me.btn2disable("J_previousStep");
  145. }
  146. });
  147. domUtils.on($G("J_nextStep"), "click", function () {
  148. if (drawStepIndex > 0 && drawStepIndex < drawStep.length) {
  149. context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  150. context.putImageData(drawStep[drawStepIndex], 0, 0);
  151. drawStepIndex += 1;
  152. me.btn2Highlight("J_previousStep");
  153. drawStepIndex == drawStep.length && me.btn2disable("J_nextStep");
  154. }
  155. });
  156. domUtils.on($G("J_clearBoard"), "click", function () {
  157. context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  158. drawStep = [];
  159. me._saveOPerate(saveNum);
  160. drawStepIndex = 1;
  161. me.isScrawl = false;
  162. me.btn2disable("J_previousStep");
  163. me.btn2disable("J_nextStep");
  164. me.btn2disable("J_clearBoard");
  165. });
  166. },
  167. _addColorBarListener:function () {
  168. var me = this;
  169. domUtils.on($G("J_colorBar"), "click", function (e) {
  170. var target = me.getTarget(e),
  171. color = target.title;
  172. if (!!color) {
  173. me._addColorSelect(target);
  174. me.brushColor = color;
  175. context.globalCompositeOperation = "source-over";
  176. context.lineWidth = me.brushWidth;
  177. context.strokeStyle = color;
  178. }
  179. });
  180. },
  181. _addBrushBarListener:function () {
  182. var me = this;
  183. domUtils.on($G("J_brushBar"), "click", function (e) {
  184. var target = me.getTarget(e),
  185. size = browser.ie ? target.innerText : target.text;
  186. if (!!size) {
  187. me._addBESelect(target);
  188. context.globalCompositeOperation = "source-over";
  189. context.lineWidth = parseInt(size);
  190. context.strokeStyle = me.brushColor;
  191. me.brushWidth = context.lineWidth;
  192. }
  193. });
  194. },
  195. _addEraserBarListener:function () {
  196. var me = this;
  197. domUtils.on($G("J_eraserBar"), "click", function (e) {
  198. var target = me.getTarget(e),
  199. size = browser.ie ? target.innerText : target.text;
  200. if (!!size) {
  201. me._addBESelect(target);
  202. context.lineWidth = parseInt(size);
  203. context.globalCompositeOperation = "destination-out";
  204. context.strokeStyle = "#FFF";
  205. }
  206. });
  207. },
  208. _addAddImgListener:function () {
  209. var file = $G("J_imgTxt");
  210. if (!window.FileReader) {
  211. $G("J_addImg").style.display = 'none';
  212. $G("J_removeImg").style.display = 'none';
  213. $G("J_sacleBoard").style.display = 'none';
  214. }
  215. domUtils.on(file, "change", function (e) {
  216. var frm = file.parentNode;
  217. addMaskLayer(lang.backgroundUploading);
  218. var target = e.target || e.srcElement,
  219. reader = new FileReader();
  220. reader.onload = function(evt){
  221. var target = evt.target || evt.srcElement;
  222. ue_callback(target.result, 'SUCCESS');
  223. };
  224. reader.readAsDataURL(target.files[0]);
  225. frm.reset();
  226. });
  227. },
  228. _addRemoveImgListenter:function () {
  229. var me = this;
  230. domUtils.on($G("J_removeImg"), "click", function () {
  231. $G("J_picBoard").innerHTML = "";
  232. me.btn2disable("J_removeImg");
  233. me.btn2disable("J_sacleBoard");
  234. });
  235. },
  236. _addScalePicListenter:function () {
  237. domUtils.on($G("J_sacleBoard"), "click", function () {
  238. var picBoard = $G("J_picBoard"),
  239. scaleCon = $G("J_scaleCon"),
  240. img = picBoard.children[0];
  241. if (img) {
  242. if (!scaleCon) {
  243. picBoard.style.cssText = "position:relative;z-index:999;"+picBoard.style.cssText;
  244. img.style.cssText = "position: absolute;top:" + (canvas.height - img.height) / 2 + "px;left:" + (canvas.width - img.width) / 2 + "px;";
  245. var scale = new ScaleBoy();
  246. picBoard.appendChild(scale.init());
  247. scale.startScale(img);
  248. } else {
  249. if (scaleCon.style.visibility == "visible") {
  250. scaleCon.style.visibility = "hidden";
  251. picBoard.style.position = "";
  252. picBoard.style.zIndex = "";
  253. } else {
  254. scaleCon.style.visibility = "visible";
  255. picBoard.style.cssText += "position:relative;z-index:999";
  256. }
  257. }
  258. }
  259. });
  260. },
  261. _addClearSelectionListenter:function () {
  262. var doc = document;
  263. domUtils.on(doc, 'mousemove', function (e) {
  264. if (browser.ie && browser.version < 11)
  265. doc.selection.clear();
  266. else
  267. window.getSelection().removeAllRanges();
  268. });
  269. },
  270. _clearSelection:function () {
  271. var list = ["J_operateBar", "J_colorBar", "J_brushBar", "J_eraserBar", "J_picBoard"];
  272. for (var i = 0, group; group = list[i++];) {
  273. domUtils.unSelectable($G(group));
  274. }
  275. },
  276. _saveOPerate:function (saveNum) {
  277. var me = this;
  278. if (drawStep.length <= saveNum) {
  279. if(drawStepIndex<drawStep.length){
  280. me.btn2disable("J_nextStep");
  281. drawStep.splice(drawStepIndex);
  282. }
  283. drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
  284. drawStepIndex = drawStep.length;
  285. } else {
  286. drawStep.shift();
  287. drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height));
  288. drawStepIndex = drawStep.length;
  289. }
  290. me.btn2Highlight("J_previousStep");
  291. me.btn2Highlight("J_clearBoard");
  292. },
  293. _originalColorSelect:function (title) {
  294. var colorList = $G("J_colorList").getElementsByTagName("td");
  295. for (var j = 0, cell; cell = colorList[j++];) {
  296. if (cell.children[0].title.toLowerCase() == title) {
  297. cell.children[0].style.opacity = 1;
  298. }
  299. }
  300. },
  301. _originalBrushSelect:function (text) {
  302. var brushList = $G("J_brushBar").children;
  303. for (var i = 0, ele; ele = brushList[i++];) {
  304. if (ele.tagName.toLowerCase() == "a") {
  305. var size = browser.ie ? ele.innerText : ele.text;
  306. if (size.toLowerCase() == text) {
  307. ele.style.opacity = 1;
  308. }
  309. }
  310. }
  311. },
  312. _addColorSelect:function (target) {
  313. var me = this,
  314. colorList = $G("J_colorList").getElementsByTagName("td"),
  315. eraserList = $G("J_eraserBar").children,
  316. brushList = $G("J_brushBar").children;
  317. for (var i = 0, cell; cell = colorList[i++];) {
  318. cell.children[0].style.opacity = 0.3;
  319. }
  320. for (var k = 0, ele; ele = brushList[k++];) {
  321. if (ele.tagName.toLowerCase() == "a") {
  322. ele.style.opacity = 0.3;
  323. var size = browser.ie ? ele.innerText : ele.text;
  324. if (size.toLowerCase() == this.brushWidth) {
  325. ele.style.opacity = 1;
  326. }
  327. }
  328. }
  329. for (var j = 0, node; node = eraserList[j++];) {
  330. if (node.tagName.toLowerCase() == "a") {
  331. node.style.opacity = 0.3;
  332. }
  333. }
  334. target.style.opacity = 1;
  335. target.blur();
  336. },
  337. _addBESelect:function (target) {
  338. var brushList = $G("J_brushBar").children;
  339. var eraserList = $G("J_eraserBar").children;
  340. for (var i = 0, ele; ele = brushList[i++];) {
  341. if (ele.tagName.toLowerCase() == "a") {
  342. ele.style.opacity = 0.3;
  343. }
  344. }
  345. for (var j = 0, node; node = eraserList[j++];) {
  346. if (node.tagName.toLowerCase() == "a") {
  347. node.style.opacity = 0.3;
  348. }
  349. }
  350. target.style.opacity = 1;
  351. target.blur();
  352. },
  353. getCanvasData:function () {
  354. var picContainer = $G("J_picBoard"),
  355. img = picContainer.children[0];
  356. if (img) {
  357. var x, y;
  358. if (img.style.position == "absolute") {
  359. x = parseInt(img.style.left);
  360. y = parseInt(img.style.top);
  361. } else {
  362. x = (picContainer.offsetWidth - img.width) / 2;
  363. y = (picContainer.offsetHeight - img.height) / 2;
  364. }
  365. context.globalCompositeOperation = "destination-over";
  366. context.drawImage(img, x, y, img.width, img.height);
  367. } else {
  368. context.globalCompositeOperation = "destination-atop";
  369. context.fillStyle = "#fff";//重置画布背景白色
  370. context.fillRect(0, 0, canvas.width, canvas.height);
  371. }
  372. try {
  373. return canvas.toDataURL("image/png").substring(22);
  374. } catch (e) {
  375. return "";
  376. }
  377. },
  378. btn2Highlight:function (id) {
  379. var cur = $G(id);
  380. cur.className.indexOf("H") == -1 && (cur.className += "H");
  381. },
  382. btn2disable:function (id) {
  383. var cur = $G(id);
  384. cur.className.indexOf("H") != -1 && (cur.className = cur.className.replace("H", ""));
  385. },
  386. getTarget:function (evt) {
  387. return evt.target || evt.srcElement;
  388. }
  389. };
  390. })();
  391. var ScaleBoy = function () {
  392. this.dom = null;
  393. this.scalingElement = null;
  394. };
  395. (function () {
  396. function _appendStyle() {
  397. var doc = document,
  398. head = doc.getElementsByTagName('head')[0],
  399. style = doc.createElement('style'),
  400. cssText = '.scale{visibility:hidden;cursor:move;position:absolute;left:0;top:0;width:100px;height:50px;background-color:#fff;font-size:0;line-height:0;opacity:.4;filter:Alpha(opacity=40);}'
  401. + '.scale span{position:absolute;left:0;top:0;width:6px;height:6px;background-color:#006DAE;}'
  402. + '.scale .hand0, .scale .hand7{cursor:nw-resize;}'
  403. + '.scale .hand1, .scale .hand6{left:50%;margin-left:-3px;cursor:n-resize;}'
  404. + '.scale .hand2, .scale .hand4, .scale .hand7{left:100%;margin-left:-6px;}'
  405. + '.scale .hand3, .scale .hand4{top:50%;margin-top:-3px;cursor:w-resize;}'
  406. + '.scale .hand5, .scale .hand6, .scale .hand7{margin-top:-6px;top:100%;}'
  407. + '.scale .hand2, .scale .hand5{cursor:ne-resize;}';
  408. style.type = 'text/css';
  409. try {
  410. style.appendChild(doc.createTextNode(cssText));
  411. } catch (e) {
  412. style.styleSheet.cssText = cssText;
  413. }
  414. head.appendChild(style);
  415. }
  416. function _getDom() {
  417. var doc = document,
  418. hand,
  419. arr = [],
  420. scale = doc.createElement('div');
  421. scale.id = 'J_scaleCon';
  422. scale.className = 'scale';
  423. for (var i = 0; i < 8; i++) {
  424. arr.push("<span class='hand" + i + "'></span>");
  425. }
  426. scale.innerHTML = arr.join("");
  427. return scale;
  428. }
  429. var rect = [
  430. //[left, top, width, height]
  431. [1, 1, -1, -1],
  432. [0, 1, 0, -1],
  433. [0, 1, 1, -1],
  434. [1, 0, -1, 0],
  435. [0, 0, 1, 0],
  436. [1, 0, -1, 1],
  437. [0, 0, 0, 1],
  438. [0, 0, 1, 1]
  439. ];
  440. ScaleBoy.prototype = {
  441. init:function () {
  442. _appendStyle();
  443. var me = this,
  444. scale = me.dom = _getDom();
  445. me.scaleMousemove.fp = me;
  446. domUtils.on(scale, 'mousedown', function (e) {
  447. var target = e.target || e.srcElement;
  448. me.start = {x:e.clientX, y:e.clientY};
  449. if (target.className.indexOf('hand') != -1) {
  450. me.dir = target.className.replace('hand', '');
  451. }
  452. domUtils.on(document.body, 'mousemove', me.scaleMousemove);
  453. e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
  454. });
  455. domUtils.on(document.body, 'mouseup', function (e) {
  456. if (me.start) {
  457. domUtils.un(document.body, 'mousemove', me.scaleMousemove);
  458. if (me.moved) {
  459. me.updateScaledElement({position:{x:scale.style.left, y:scale.style.top}, size:{w:scale.style.width, h:scale.style.height}});
  460. }
  461. delete me.start;
  462. delete me.moved;
  463. delete me.dir;
  464. }
  465. });
  466. return scale;
  467. },
  468. startScale:function (objElement) {
  469. var me = this, Idom = me.dom;
  470. Idom.style.cssText = 'visibility:visible;top:' + objElement.style.top + ';left:' + objElement.style.left + ';width:' + objElement.offsetWidth + 'px;height:' + objElement.offsetHeight + 'px;';
  471. me.scalingElement = objElement;
  472. },
  473. updateScaledElement:function (objStyle) {
  474. var cur = this.scalingElement,
  475. pos = objStyle.position,
  476. size = objStyle.size;
  477. if (pos) {
  478. typeof pos.x != 'undefined' && (cur.style.left = pos.x);
  479. typeof pos.y != 'undefined' && (cur.style.top = pos.y);
  480. }
  481. if (size) {
  482. size.w && (cur.style.width = size.w);
  483. size.h && (cur.style.height = size.h);
  484. }
  485. },
  486. updateStyleByDir:function (dir, offset) {
  487. var me = this,
  488. dom = me.dom, tmp;
  489. rect['def'] = [1, 1, 0, 0];
  490. if (rect[dir][0] != 0) {
  491. tmp = parseInt(dom.style.left) + offset.x;
  492. dom.style.left = me._validScaledProp('left', tmp) + 'px';
  493. }
  494. if (rect[dir][1] != 0) {
  495. tmp = parseInt(dom.style.top) + offset.y;
  496. dom.style.top = me._validScaledProp('top', tmp) + 'px';
  497. }
  498. if (rect[dir][2] != 0) {
  499. tmp = dom.clientWidth + rect[dir][2] * offset.x;
  500. dom.style.width = me._validScaledProp('width', tmp) + 'px';
  501. }
  502. if (rect[dir][3] != 0) {
  503. tmp = dom.clientHeight + rect[dir][3] * offset.y;
  504. dom.style.height = me._validScaledProp('height', tmp) + 'px';
  505. }
  506. if (dir === 'def') {
  507. me.updateScaledElement({position:{x:dom.style.left, y:dom.style.top}});
  508. }
  509. },
  510. scaleMousemove:function (e) {
  511. var me = arguments.callee.fp,
  512. start = me.start,
  513. dir = me.dir || 'def',
  514. offset = {x:e.clientX - start.x, y:e.clientY - start.y};
  515. me.updateStyleByDir(dir, offset);
  516. arguments.callee.fp.start = {x:e.clientX, y:e.clientY};
  517. arguments.callee.fp.moved = 1;
  518. },
  519. _validScaledProp:function (prop, value) {
  520. var ele = this.dom,
  521. wrap = $G("J_picBoard");
  522. value = isNaN(value) ? 0 : value;
  523. switch (prop) {
  524. case 'left':
  525. return value < 0 ? 0 : (value + ele.clientWidth) > wrap.clientWidth ? wrap.clientWidth - ele.clientWidth : value;
  526. case 'top':
  527. return value < 0 ? 0 : (value + ele.clientHeight) > wrap.clientHeight ? wrap.clientHeight - ele.clientHeight : value;
  528. case 'width':
  529. return value <= 0 ? 1 : (value + ele.offsetLeft) > wrap.clientWidth ? wrap.clientWidth - ele.offsetLeft : value;
  530. case 'height':
  531. return value <= 0 ? 1 : (value + ele.offsetTop) > wrap.clientHeight ? wrap.clientHeight - ele.offsetTop : value;
  532. }
  533. }
  534. };
  535. })();
  536. //后台回调
  537. function ue_callback(url, state) {
  538. var doc = document,
  539. picBorard = $G("J_picBoard"),
  540. img = doc.createElement("img");
  541. //图片缩放
  542. function scale(img, max, oWidth, oHeight) {
  543. var width = 0, height = 0, percent, ow = img.width || oWidth, oh = img.height || oHeight;
  544. if (ow > max || oh > max) {
  545. if (ow >= oh) {
  546. if (width = ow - max) {
  547. percent = (width / ow).toFixed(2);
  548. img.height = oh - oh * percent;
  549. img.width = max;
  550. }
  551. } else {
  552. if (height = oh - max) {
  553. percent = (height / oh).toFixed(2);
  554. img.width = ow - ow * percent;
  555. img.height = max;
  556. }
  557. }
  558. }
  559. }
  560. //移除遮罩层
  561. removeMaskLayer();
  562. //状态响应
  563. if (state == "SUCCESS") {
  564. picBorard.innerHTML = "";
  565. img.onload = function () {
  566. scale(this, 300);
  567. picBorard.appendChild(img);
  568. var obj = new scrawl();
  569. obj.btn2Highlight("J_removeImg");
  570. //trace 2457
  571. obj.btn2Highlight("J_sacleBoard");
  572. };
  573. img.src = url;
  574. } else {
  575. alert(state);
  576. }
  577. }
  578. //去掉遮罩层
  579. function removeMaskLayer() {
  580. var maskLayer = $G("J_maskLayer");
  581. maskLayer.className = "maskLayerNull";
  582. maskLayer.innerHTML = "";
  583. dialog.buttons[0].setDisabled(false);
  584. }
  585. //添加遮罩层
  586. function addMaskLayer(html) {
  587. var maskLayer = $G("J_maskLayer");
  588. dialog.buttons[0].setDisabled(true);
  589. maskLayer.className = "maskLayer";
  590. maskLayer.innerHTML = html;
  591. }
  592. //执行确认按钮方法
  593. function exec(scrawlObj) {
  594. if (scrawlObj.isScrawl) {
  595. addMaskLayer(lang.scrawlUpLoading);
  596. var base64 = scrawlObj.getCanvasData();
  597. if (!!base64) {
  598. var options = {
  599. timeout:100000,
  600. onsuccess:function (xhr) {
  601. if (!scrawlObj.isCancelScrawl) {
  602. var responseObj;
  603. responseObj = eval("(" + xhr.responseText + ")");
  604. if (responseObj.state == "SUCCESS") {
  605. var imgObj = {},
  606. url = editor.options.scrawlUrlPrefix + responseObj.url;
  607. imgObj.src = url;
  608. imgObj._src = url;
  609. imgObj.alt = responseObj.original || '';
  610. imgObj.title = responseObj.title || '';
  611. editor.execCommand("insertImage", imgObj);
  612. dialog.close();
  613. } else {
  614. alert(responseObj.state);
  615. }
  616. }
  617. },
  618. onerror:function () {
  619. alert(lang.imageError);
  620. dialog.close();
  621. }
  622. };
  623. options[editor.getOpt('scrawlFieldName')] = base64;
  624. var actionUrl = editor.getActionUrl(editor.getOpt('scrawlActionName')),
  625. params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
  626. url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + params);
  627. ajax.request(url, options);
  628. }
  629. } else {
  630. addMaskLayer(lang.noScarwl + "&nbsp;&nbsp;&nbsp;<input type='button' value='" + lang.continueBtn + "' onclick='removeMaskLayer()'/>");
  631. }
  632. }