| 
					
				 | 
			
			
				@@ -0,0 +1,671 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+/** 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ * Created with JetBrains PhpStorm. 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ * User: xuheng 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ * Date: 12-5-22 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ * Time: 上午11:38 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ * To change this template use File | Settings | File Templates. 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ */ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+var scrawl = function (options) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    options && this.initOptions(options); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+}; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+(function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    var canvas = $G("J_brushBoard"), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        context = canvas.getContext('2d'), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        drawStep = [], //undo redo存储 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        drawStepIndex = 0; //undo redo指针 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    scrawl.prototype = { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        isScrawl:false, //是否涂鸦 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        brushWidth:-1, //画笔粗细 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        brushColor:"", //画笔颜色 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        initOptions:function (options) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var me = this; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me.originalState(options);//初始页面状态 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me._buildToolbarColor(options.colorList);//动态生成颜色选择集合 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me._addBoardListener(options.saveNum);//添加画板处理 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me._addOPerateListener(options.saveNum);//添加undo redo clearBoard处理 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me._addColorBarListener();//添加颜色选择处理 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me._addBrushBarListener();//添加画笔大小处理 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me._addEraserBarListener();//添加橡皮大小处理 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me._addAddImgListener();//添加增添背景图片处理 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me._addRemoveImgListenter();//删除背景图片处理 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me._addScalePicListenter();//添加缩放处理 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me._addClearSelectionListenter();//添加清楚选中状态处理 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me._originalColorSelect(options.drawBrushColor);//初始化颜色选中 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me._originalBrushSelect(options.drawBrushSize);//初始化画笔选中 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me._clearSelection();//清楚选中状态 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        originalState:function (options) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var me = this; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me.brushWidth = options.drawBrushSize;//同步画笔粗细 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me.brushColor = options.drawBrushColor;//同步画笔颜色 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            context.lineWidth = me.brushWidth;//初始画笔大小 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            context.strokeStyle = me.brushColor;//初始画笔颜色 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            context.fillStyle = "transparent";//初始画布背景颜色 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            context.lineCap = "round";//去除锯齿 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            context.fill(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        _buildToolbarColor:function (colorList) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var tmp = null, arr = []; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            arr.push("<table id='J_colorList'>"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            for (var i = 0, color; color = colorList[i++];) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if ((i - 1) % 5 == 0) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    if (i != 1) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        arr.push("</tr>"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    arr.push("<tr>"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                tmp = '#' + color; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                arr.push("<td><a title='" + tmp + "' href='javascript:void(0)' style='background-color:" + tmp + "'></a></td>"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            arr.push("</tr></table>"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            $G("J_colorBar").innerHTML = arr.join(""); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        _addBoardListener:function (saveNum) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var me = this, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                margin = 0, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                startX = -1, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                startY = -1, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                isMouseDown = false, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                isMouseMove = false, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                isMouseUp = false, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                buttonPress = 0, button, flag = ''; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            margin = parseInt(domUtils.getComputedStyle($G("J_wrap"), "margin-left")); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height)); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            drawStepIndex += 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            domUtils.on(canvas, ["mousedown", "mousemove", "mouseup", "mouseout"], function (e) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                button = browser.webkit ? e.which : buttonPress; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                switch (e.type) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    case 'mousedown': 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        buttonPress = 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        flag = 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        isMouseDown = true; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        isMouseUp = false; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        isMouseMove = false; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        me.isScrawl = true; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        startX = e.clientX - margin;//10为外边距总和 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        startY = e.clientY - margin; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        context.beginPath(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        break; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    case 'mousemove' : 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        if (!flag && button == 0) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            return; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        if (!flag && button) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            startX = e.clientX - margin;//10为外边距总和 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            startY = e.clientY - margin; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            context.beginPath(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            flag = 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        if (isMouseUp || !isMouseDown) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            return; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        var endX = e.clientX - margin, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            endY = e.clientY - margin; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        context.moveTo(startX, startY); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        context.lineTo(endX, endY); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        context.stroke(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        startX = endX; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        startY = endY; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        isMouseMove = true; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        break; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    case 'mouseup': 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        buttonPress = 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        if (!isMouseDown)return; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        if (!isMouseMove) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            context.arc(startX, startY, context.lineWidth, 0, Math.PI * 2, false); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            context.fillStyle = context.strokeStyle; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            context.fill(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        context.closePath(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        me._saveOPerate(saveNum); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        isMouseDown = false; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        isMouseMove = false; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        isMouseUp = true; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        startX = -1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        startY = -1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        break; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    case 'mouseout': 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        flag = ''; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        buttonPress = 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        if (button == 1) return; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        context.closePath(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        break; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        _addOPerateListener:function (saveNum) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var me = this; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            domUtils.on($G("J_previousStep"), "click", function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (drawStepIndex > 1) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    drawStepIndex -= 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    context.putImageData(drawStep[drawStepIndex - 1], 0, 0); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    me.btn2Highlight("J_nextStep"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    drawStepIndex == 1 && me.btn2disable("J_previousStep"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            domUtils.on($G("J_nextStep"), "click", function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (drawStepIndex > 0 && drawStepIndex < drawStep.length) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    context.putImageData(drawStep[drawStepIndex], 0, 0); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    drawStepIndex += 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    me.btn2Highlight("J_previousStep"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    drawStepIndex == drawStep.length && me.btn2disable("J_nextStep"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            domUtils.on($G("J_clearBoard"), "click", function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                drawStep = []; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                me._saveOPerate(saveNum); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                drawStepIndex = 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                me.isScrawl = false; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                me.btn2disable("J_previousStep"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                me.btn2disable("J_nextStep"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                me.btn2disable("J_clearBoard"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        _addColorBarListener:function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var me = this; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            domUtils.on($G("J_colorBar"), "click", function (e) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                var target = me.getTarget(e), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    color = target.title; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (!!color) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    me._addColorSelect(target); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    me.brushColor = color; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    context.globalCompositeOperation = "source-over"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    context.lineWidth = me.brushWidth; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    context.strokeStyle = color; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        _addBrushBarListener:function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var me = this; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            domUtils.on($G("J_brushBar"), "click", function (e) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                var target = me.getTarget(e), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    size = browser.ie ? target.innerText : target.text; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (!!size) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    me._addBESelect(target); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    context.globalCompositeOperation = "source-over"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    context.lineWidth = parseInt(size); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    context.strokeStyle = me.brushColor; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    me.brushWidth = context.lineWidth; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        _addEraserBarListener:function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var me = this; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            domUtils.on($G("J_eraserBar"), "click", function (e) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                var target = me.getTarget(e), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    size = browser.ie ? target.innerText : target.text; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (!!size) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    me._addBESelect(target); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    context.lineWidth = parseInt(size); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    context.globalCompositeOperation = "destination-out"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    context.strokeStyle = "#FFF"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        _addAddImgListener:function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var file = $G("J_imgTxt"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (!window.FileReader) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                $G("J_addImg").style.display = 'none'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                $G("J_removeImg").style.display = 'none'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                $G("J_sacleBoard").style.display = 'none'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            domUtils.on(file, "change", function (e) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                var frm = file.parentNode; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                addMaskLayer(lang.backgroundUploading); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                var target = e.target || e.srcElement, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    reader = new FileReader(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                reader.onload = function(evt){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    var target = evt.target || evt.srcElement; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    ue_callback(target.result, 'SUCCESS'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                reader.readAsDataURL(target.files[0]); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                frm.reset(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        _addRemoveImgListenter:function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var me = this; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            domUtils.on($G("J_removeImg"), "click", function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                $G("J_picBoard").innerHTML = ""; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                me.btn2disable("J_removeImg"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                me.btn2disable("J_sacleBoard"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        _addScalePicListenter:function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            domUtils.on($G("J_sacleBoard"), "click", function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                var picBoard = $G("J_picBoard"), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    scaleCon = $G("J_scaleCon"), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    img = picBoard.children[0]; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (img) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    if (!scaleCon) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        picBoard.style.cssText = "position:relative;z-index:999;"+picBoard.style.cssText; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        img.style.cssText = "position: absolute;top:" + (canvas.height - img.height) / 2 + "px;left:" + (canvas.width - img.width) / 2 + "px;"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        var scale = new ScaleBoy(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        picBoard.appendChild(scale.init()); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        scale.startScale(img); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        if (scaleCon.style.visibility == "visible") { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            scaleCon.style.visibility = "hidden"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            picBoard.style.position = ""; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            picBoard.style.zIndex = ""; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            scaleCon.style.visibility = "visible"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            picBoard.style.cssText += "position:relative;z-index:999"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        _addClearSelectionListenter:function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var doc = document; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            domUtils.on(doc, 'mousemove', function (e) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (browser.ie && browser.version < 11) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    doc.selection.clear(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                else 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    window.getSelection().removeAllRanges(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        _clearSelection:function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var list = ["J_operateBar", "J_colorBar", "J_brushBar", "J_eraserBar", "J_picBoard"]; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            for (var i = 0, group; group = list[i++];) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                domUtils.unSelectable($G(group)); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        _saveOPerate:function (saveNum) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var me = this; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (drawStep.length <= saveNum) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if(drawStepIndex<drawStep.length){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    me.btn2disable("J_nextStep"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    drawStep.splice(drawStepIndex); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height)); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                drawStepIndex = drawStep.length; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                drawStep.shift(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                drawStep.push(context.getImageData(0, 0, context.canvas.width, context.canvas.height)); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                drawStepIndex = drawStep.length; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me.btn2Highlight("J_previousStep"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me.btn2Highlight("J_clearBoard"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        _originalColorSelect:function (title) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var colorList = $G("J_colorList").getElementsByTagName("td"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            for (var j = 0, cell; cell = colorList[j++];) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (cell.children[0].title.toLowerCase() == title) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    cell.children[0].style.opacity = 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        _originalBrushSelect:function (text) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var brushList = $G("J_brushBar").children; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            for (var i = 0, ele; ele = brushList[i++];) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (ele.tagName.toLowerCase() == "a") { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    var size = browser.ie ? ele.innerText : ele.text; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    if (size.toLowerCase() == text) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        ele.style.opacity = 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        _addColorSelect:function (target) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var me = this, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                colorList = $G("J_colorList").getElementsByTagName("td"), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                eraserList = $G("J_eraserBar").children, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                brushList = $G("J_brushBar").children; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            for (var i = 0, cell; cell = colorList[i++];) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                cell.children[0].style.opacity = 0.3; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            for (var k = 0, ele; ele = brushList[k++];) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (ele.tagName.toLowerCase() == "a") { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    ele.style.opacity = 0.3; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    var size = browser.ie ? ele.innerText : ele.text; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    if (size.toLowerCase() == this.brushWidth) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        ele.style.opacity = 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            for (var j = 0, node; node = eraserList[j++];) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (node.tagName.toLowerCase() == "a") { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    node.style.opacity = 0.3; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            target.style.opacity = 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            target.blur(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        _addBESelect:function (target) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var brushList = $G("J_brushBar").children; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var eraserList = $G("J_eraserBar").children; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            for (var i = 0, ele; ele = brushList[i++];) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (ele.tagName.toLowerCase() == "a") { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    ele.style.opacity = 0.3; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            for (var j = 0, node; node = eraserList[j++];) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (node.tagName.toLowerCase() == "a") { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    node.style.opacity = 0.3; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            target.style.opacity = 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            target.blur(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        getCanvasData:function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var picContainer = $G("J_picBoard"), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                img = picContainer.children[0]; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (img) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                var x, y; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (img.style.position == "absolute") { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    x = parseInt(img.style.left); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    y = parseInt(img.style.top); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    x = (picContainer.offsetWidth - img.width) / 2; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    y = (picContainer.offsetHeight - img.height) / 2; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                context.globalCompositeOperation = "destination-over"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                context.drawImage(img, x, y, img.width, img.height); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                context.globalCompositeOperation = "destination-atop"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                context.fillStyle = "#fff";//重置画布背景白色 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                context.fillRect(0, 0, canvas.width, canvas.height); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            try { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                return canvas.toDataURL("image/png").substring(22); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } catch (e) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                return ""; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        btn2Highlight:function (id) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var cur = $G(id); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            cur.className.indexOf("H") == -1 && (cur.className += "H"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        btn2disable:function (id) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var cur = $G(id); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            cur.className.indexOf("H") != -1 && (cur.className = cur.className.replace("H", "")); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        getTarget:function (evt) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            return evt.target || evt.srcElement; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+})(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+var ScaleBoy = function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    this.dom = null; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    this.scalingElement = null; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+}; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+(function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    function _appendStyle() { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var doc = document, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            head = doc.getElementsByTagName('head')[0], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            style = doc.createElement('style'), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            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);}' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                + '.scale span{position:absolute;left:0;top:0;width:6px;height:6px;background-color:#006DAE;}' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                + '.scale .hand0, .scale .hand7{cursor:nw-resize;}' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                + '.scale .hand1, .scale .hand6{left:50%;margin-left:-3px;cursor:n-resize;}' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                + '.scale .hand2, .scale .hand4, .scale .hand7{left:100%;margin-left:-6px;}' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                + '.scale .hand3, .scale .hand4{top:50%;margin-top:-3px;cursor:w-resize;}' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                + '.scale .hand5, .scale .hand6, .scale .hand7{margin-top:-6px;top:100%;}' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                + '.scale .hand2, .scale .hand5{cursor:ne-resize;}'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        style.type = 'text/css'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        try { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            style.appendChild(doc.createTextNode(cssText)); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } catch (e) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            style.styleSheet.cssText = cssText; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        head.appendChild(style); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    function _getDom() { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var doc = document, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            hand, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            arr = [], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            scale = doc.createElement('div'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        scale.id = 'J_scaleCon'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        scale.className = 'scale'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        for (var i = 0; i < 8; i++) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            arr.push("<span class='hand" + i + "'></span>"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        scale.innerHTML = arr.join(""); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        return scale; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    var rect = [ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //[left, top, width, height] 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        [1, 1, -1, -1], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        [0, 1, 0, -1], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        [0, 1, 1, -1], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        [1, 0, -1, 0], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        [0, 0, 1, 0], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        [1, 0, -1, 1], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        [0, 0, 0, 1], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        [0, 0, 1, 1] 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    ]; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    ScaleBoy.prototype = { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        init:function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            _appendStyle(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var me = this, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                scale = me.dom = _getDom(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me.scaleMousemove.fp = me; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            domUtils.on(scale, 'mousedown', function (e) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                var target = e.target || e.srcElement; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                me.start = {x:e.clientX, y:e.clientY}; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (target.className.indexOf('hand') != -1) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    me.dir = target.className.replace('hand', ''); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                domUtils.on(document.body, 'mousemove', me.scaleMousemove); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            domUtils.on(document.body, 'mouseup', function (e) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (me.start) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    domUtils.un(document.body, 'mousemove', me.scaleMousemove); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    if (me.moved) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        me.updateScaledElement({position:{x:scale.style.left, y:scale.style.top}, size:{w:scale.style.width, h:scale.style.height}}); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    delete me.start; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    delete me.moved; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    delete me.dir; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            return scale; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        startScale:function (objElement) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var me = this, Idom = me.dom; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            Idom.style.cssText = 'visibility:visible;top:' + objElement.style.top + ';left:' + objElement.style.left + ';width:' + objElement.offsetWidth + 'px;height:' + objElement.offsetHeight + 'px;'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me.scalingElement = objElement; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        updateScaledElement:function (objStyle) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var cur = this.scalingElement, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                pos = objStyle.position, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                size = objStyle.size; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (pos) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                typeof pos.x != 'undefined' && (cur.style.left = pos.x); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                typeof pos.y != 'undefined' && (cur.style.top = pos.y); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (size) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                size.w && (cur.style.width = size.w); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                size.h && (cur.style.height = size.h); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        updateStyleByDir:function (dir, offset) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var me = this, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                dom = me.dom, tmp; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            rect['def'] = [1, 1, 0, 0]; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (rect[dir][0] != 0) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                tmp = parseInt(dom.style.left) + offset.x; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                dom.style.left = me._validScaledProp('left', tmp) + 'px'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (rect[dir][1] != 0) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                tmp = parseInt(dom.style.top) + offset.y; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                dom.style.top = me._validScaledProp('top', tmp) + 'px'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (rect[dir][2] != 0) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                tmp = dom.clientWidth + rect[dir][2] * offset.x; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                dom.style.width = me._validScaledProp('width', tmp) + 'px'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (rect[dir][3] != 0) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                tmp = dom.clientHeight + rect[dir][3] * offset.y; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                dom.style.height = me._validScaledProp('height', tmp) + 'px'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (dir === 'def') { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                me.updateScaledElement({position:{x:dom.style.left, y:dom.style.top}}); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        scaleMousemove:function (e) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var me = arguments.callee.fp, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                start = me.start, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                dir = me.dir || 'def', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                offset = {x:e.clientX - start.x, y:e.clientY - start.y}; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            me.updateStyleByDir(dir, offset); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            arguments.callee.fp.start = {x:e.clientX, y:e.clientY}; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            arguments.callee.fp.moved = 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        _validScaledProp:function (prop, value) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var ele = this.dom, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                wrap = $G("J_picBoard"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            value = isNaN(value) ? 0 : value; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            switch (prop) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                case 'left': 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    return value < 0 ? 0 : (value + ele.clientWidth) > wrap.clientWidth ? wrap.clientWidth - ele.clientWidth : value; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                case 'top': 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    return value < 0 ? 0 : (value + ele.clientHeight) > wrap.clientHeight ? wrap.clientHeight - ele.clientHeight : value; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                case 'width': 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    return value <= 0 ? 1 : (value + ele.offsetLeft) > wrap.clientWidth ? wrap.clientWidth - ele.offsetLeft : value; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                case 'height': 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    return value <= 0 ? 1 : (value + ele.offsetTop) > wrap.clientHeight ? wrap.clientHeight - ele.offsetTop : value; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+})(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+//后台回调 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+function ue_callback(url, state) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    var doc = document, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        picBorard = $G("J_picBoard"), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        img = doc.createElement("img"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    //图片缩放 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    function scale(img, max, oWidth, oHeight) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var width = 0, height = 0, percent, ow = img.width || oWidth, oh = img.height || oHeight; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        if (ow > max || oh > max) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (ow >= oh) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (width = ow - max) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    percent = (width / ow).toFixed(2); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    img.height = oh - oh * percent; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    img.width = max; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (height = oh - max) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    percent = (height / oh).toFixed(2); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    img.width = ow - ow * percent; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    img.height = max; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    //移除遮罩层 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    removeMaskLayer(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    //状态响应 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    if (state == "SUCCESS") { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        picBorard.innerHTML = ""; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        img.onload = function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            scale(this, 300); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            picBorard.appendChild(img); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var obj = new scrawl(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            obj.btn2Highlight("J_removeImg"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            //trace 2457 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            obj.btn2Highlight("J_sacleBoard"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        img.src = url; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        alert(state); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+//去掉遮罩层 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+function removeMaskLayer() { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    var maskLayer = $G("J_maskLayer"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    maskLayer.className = "maskLayerNull"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    maskLayer.innerHTML = ""; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    dialog.buttons[0].setDisabled(false); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+//添加遮罩层 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+function addMaskLayer(html) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    var maskLayer = $G("J_maskLayer"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    dialog.buttons[0].setDisabled(true); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    maskLayer.className = "maskLayer"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    maskLayer.innerHTML = html; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+//执行确认按钮方法 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+function exec(scrawlObj) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    if (scrawlObj.isScrawl) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        addMaskLayer(lang.scrawlUpLoading); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var base64 = scrawlObj.getCanvasData(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        if (!!base64) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var options = { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                timeout:100000, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                onsuccess:function (xhr) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    if (!scrawlObj.isCancelScrawl) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        var responseObj; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        responseObj = eval("(" + xhr.responseText + ")"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        if (responseObj.state == "SUCCESS") { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            var imgObj = {}, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                                url = editor.options.scrawlUrlPrefix + responseObj.url; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            imgObj.src = url; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            imgObj._src = url; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            imgObj.alt = responseObj.original || ''; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            imgObj.title = responseObj.title || ''; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            editor.execCommand("insertImage", imgObj); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            dialog.close(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            alert(responseObj.state); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                onerror:function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    alert(lang.imageError); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    dialog.close(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            options[editor.getOpt('scrawlFieldName')] = base64; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var actionUrl = editor.getActionUrl(editor.getOpt('scrawlActionName')), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + params); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ajax.request(url, options); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        addMaskLayer(lang.noScarwl + "   <input type='button' value='" + lang.continueBtn + "'  onclick='removeMaskLayer()'/>"); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 |