├── .gitignore ├── CSS └── main.css ├── Code ├── About.htm ├── Help.htm ├── SelectImg.html └── readme.txt ├── Images ├── 1.png ├── 2.png ├── files │ ├── a.jpg │ ├── b.jpg │ ├── bird.png │ ├── c.jpg │ ├── desk_005.jpg │ ├── star.jpg │ └── win.jpg ├── log.ico └── tools │ ├── Alpha.png │ ├── Clone.png │ ├── Curve.png │ ├── Ellipse.png │ ├── Eraser.png │ ├── Fill.png │ ├── Gradient.png │ ├── Hand.png │ ├── Lasso.png │ ├── Line.png │ ├── Move.png │ ├── OtherShap.png │ ├── PaintBrush.png │ ├── Pencil.png │ ├── Polygon.png │ ├── Rectangle.png │ ├── Select.png │ ├── SelectCut.png │ ├── Text.png │ ├── Triangle.png │ ├── ZoomAll.png │ └── ZoomMiro.png ├── JScript ├── CodeJS │ ├── changeTheme.js │ ├── fullscreen.js │ ├── keypressEvent.js │ ├── main.js │ └── readme.txt ├── Mousetrap │ ├── mousetrap.min.js │ └── test.html ├── RulersGuides │ ├── Dragdrop.js │ ├── Event.js │ └── RulersGuides.js ├── jpicker-1.1.6 │ ├── css │ │ └── jPicker-1.1.6.css │ ├── images │ │ ├── AlphaBar.png │ │ ├── Bars.png │ │ ├── Maps.png │ │ ├── NoColor.png │ │ ├── bar-opacity.png │ │ ├── close.bmp │ │ ├── map-opacity.png │ │ ├── mappoint.gif │ │ ├── picker.gif │ │ ├── preview-opacity.png │ │ └── rangearrows.gif │ ├── jPicker.css │ └── jpicker-1.1.6.js ├── jquery-1.7.2.min.js └── jquery-easyui │ ├── easyloader.js │ ├── easyui-lang-zh_CN.js │ ├── jquery.easyui.min.js │ └── themes │ ├── bootstrap │ ├── easyui.css │ └── images │ │ ├── accordion_arrows.png │ │ ├── blank.gif │ │ ├── calendar_arrows.png │ │ ├── combo_arrow.png │ │ ├── datagrid_icons.png │ │ ├── datebox_arrow.png │ │ ├── layout_arrows.png │ │ ├── linkbutton_bg.png │ │ ├── loading.gif │ │ ├── menu_arrows.png │ │ ├── messager_icons.png │ │ ├── pagination_icons.png │ │ ├── panel_tools.png │ │ ├── searchbox_button.png │ │ ├── slider_handle.png │ │ ├── spinner_arrows.png │ │ ├── tabs_icons.png │ │ ├── tree_icons.png │ │ └── validatebox_warning.png │ ├── default │ ├── easyui.css │ ├── images │ │ ├── accordion_arrows.png │ │ ├── blank.gif │ │ ├── calendar_arrows.png │ │ ├── combo_arrow.png │ │ ├── datagrid_icons.png │ │ ├── datebox_arrow.png │ │ ├── layout_arrows.png │ │ ├── linkbutton_bg.png │ │ ├── loading.gif │ │ ├── menu_arrows.png │ │ ├── messager_icons.png │ │ ├── pagination_icons.png │ │ ├── panel_tools.png │ │ ├── searchbox_button.png │ │ ├── slider_handle.png │ │ ├── spinner_arrows.png │ │ ├── tabs_icons.png │ │ ├── tree_icons.png │ │ └── validatebox_warning.png │ └── 副本 easyui.css │ ├── icon.css │ ├── icons │ ├── about.png │ ├── autolevel.png │ ├── back.png │ ├── background.png │ ├── blackwhite.png │ ├── blank.gif │ ├── blur.png │ ├── bootstrap.png │ ├── cancel.png │ ├── canvassize.png │ ├── clear.png │ ├── closeall.png │ ├── cloud.png │ ├── colorpalettes.png │ ├── communite.png │ ├── copy.png │ ├── copylevel.png │ ├── curve.png │ ├── cut.png │ ├── default.png │ ├── downlevel.png │ ├── edit_add.png │ ├── edit_remove.png │ ├── filesave.png │ ├── filter.png │ ├── float.png │ ├── fromCam.png │ ├── fullscreen.png │ ├── getimg.png │ ├── grid.png │ ├── help.png │ ├── helpsite.png │ ├── history.png │ ├── horizonrotate.png │ ├── imgindex.png │ ├── imgsize.png │ ├── inputcc.png │ ├── layer.png │ ├── level.png │ ├── levelinfo.png │ ├── light.png │ ├── log.png │ ├── metro-blue.png │ ├── metro-green.png │ ├── metro-red.png │ ├── mini_add.png │ ├── mini_edit.png │ ├── mini_refresh.png │ ├── new.png │ ├── newlevel.png │ ├── no.png │ ├── ok.png │ ├── open.png │ ├── opsitecolor.png │ ├── option.png │ ├── painting.png │ ├── paste.png │ ├── print.png │ ├── redo.png │ ├── redoall.png │ ├── reload.png │ ├── reset.png │ ├── rotate180.png │ ├── rotatee90.png │ ├── rotatew90.png │ ├── ruler.png │ ├── saveall.png │ ├── saveas.png │ ├── search.png │ ├── searchimg.png │ ├── selectall.png │ ├── send.png │ ├── sharpen.png │ ├── soft.png │ ├── state.png │ ├── sum.png │ ├── tailor.png │ ├── tip.png │ ├── tools.png │ ├── turnblue.png │ ├── turngreen.png │ ├── turnold.png │ ├── turnred.png │ ├── undo.png │ ├── undoall.png │ ├── uplevel.png │ ├── verticalrotate.png │ ├── wood.png │ ├── zoomin.png │ └── zoomout.png │ ├── metro-blue │ ├── easyui.css │ ├── images │ │ ├── accordion_arrows.png │ │ ├── blank.gif │ │ ├── calendar_arrows.png │ │ ├── combo_arrow.png │ │ ├── datagrid_icons.png │ │ ├── datebox_arrow.png │ │ ├── layout_arrows.png │ │ ├── linkbutton_bg.png │ │ ├── loading.gif │ │ ├── menu_arrows.png │ │ ├── messager_icons.png │ │ ├── pagination_icons.png │ │ ├── panel_tools.png │ │ ├── searchbox_button.png │ │ ├── slider_handle.png │ │ ├── spinner_arrows.png │ │ ├── tabs_icons.png │ │ ├── tree_icons.png │ │ └── validatebox_warning.png │ └── 副本 easyui.css │ ├── metro-green │ ├── easyui.css │ └── images │ │ ├── accordion_arrows.png │ │ ├── blank.gif │ │ ├── calendar_arrows.png │ │ ├── combo_arrow.png │ │ ├── datagrid_icons.png │ │ ├── datebox_arrow.png │ │ ├── layout_arrows.png │ │ ├── linkbutton_bg.png │ │ ├── loading.gif │ │ ├── menu_arrows.png │ │ ├── messager_icons.png │ │ ├── pagination_icons.png │ │ ├── panel_tools.png │ │ ├── searchbox_button.png │ │ ├── slider_handle.png │ │ ├── spinner_arrows.png │ │ ├── tabs_icons.png │ │ ├── tree_icons.png │ │ └── validatebox_warning.png │ └── metro-red │ ├── easyui.css │ └── images │ ├── accordion_arrows.png │ ├── blank.gif │ ├── calendar_arrows.png │ ├── combo_arrow.png │ ├── datagrid_icons.png │ ├── datebox_arrow.png │ ├── layout_arrows.png │ ├── linkbutton_bg.png │ ├── loading.gif │ ├── menu_arrows.png │ ├── messager_icons.png │ ├── pagination_icons.png │ ├── panel_tools.png │ ├── searchbox_button.png │ ├── slider_handle.png │ ├── spinner_arrows.png │ ├── tabs_icons.png │ ├── tree_icons.png │ └── validatebox_warning.png ├── License ├── README.md ├── docker ├── Dockerfile └── docker_build.sh └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | 16 | ############################################# 17 | # Maven.gitignore global 18 | ############################################# 19 | target/ 20 | pom.xml.tag 21 | pom.xml.releaseBackup 22 | pom.xml.versionsBackup 23 | pom.xml.next 24 | release.properties 25 | dependency-reduced-pom.xml 26 | buildNumber.properties 27 | .mvn/timing.properties 28 | # https://github.com/takari/maven-wrapper#usage-without-binary-jar 29 | .mvn/wrapper/maven-wrapper.jar 30 | 31 | ############################################# 32 | # JetBrains.gitignore global 33 | ############################################# 34 | 35 | # User-specific stuff 36 | .idea/**/workspace.xml 37 | .idea/**/tasks.xml 38 | .idea/**/usage.statistics.xml 39 | .idea/**/dictionaries 40 | .idea/**/shelf 41 | 42 | # Generated files 43 | .idea/**/contentModel.xml 44 | 45 | # Sensitive or high-churn files 46 | .idea/**/dataSources/ 47 | .idea/**/dataSources.ids 48 | .idea/**/dataSources.local.xml 49 | .idea/**/sqlDataSources.xml 50 | .idea/**/dynamic.xml 51 | .idea/**/uiDesigner.xml 52 | .idea/**/dbnavigator.xml 53 | 54 | # Gradle 55 | .idea/**/gradle.xml 56 | .idea/**/libraries 57 | 58 | # Gradle and Maven with auto-import 59 | # When using Gradle or Maven with auto-import, you should exclude module files, 60 | # since they will be recreated, and may cause churn. Uncomment if using 61 | auto-import. 62 | .idea/modules.xml 63 | .idea/*.iml 64 | .idea/modules 65 | .iml 66 | .ipr 67 | 68 | # CMake 69 | cmake-build-*/ 70 | 71 | # Mongo Explorer plugin 72 | .idea/**/mongoSettings.xml 73 | 74 | # File-based project format 75 | *.iws 76 | 77 | # IntelliJ 78 | out/ 79 | .idea/ 80 | *.iml 81 | 82 | # mpeltonen/sbt-idea plugin 83 | .idea_modules/ 84 | 85 | # JIRA plugin 86 | atlassian-ide-plugin.xml 87 | 88 | # Cursive Clojure plugin 89 | .idea/replstate.xml 90 | 91 | # Crashlytics plugin (for Android Studio and IntelliJ) 92 | com_crashlytics_export_strings.xml 93 | crashlytics.properties 94 | crashlytics-build.properties 95 | fabric.properties 96 | 97 | # Editor-based Rest Client 98 | .idea/httpRequests 99 | 100 | # Android studio 3.1+ serialized cache file 101 | .idea/caches/build_file_checksums.ser 102 | 103 | ############################################# 104 | # Eclipse.gitignore global 105 | ############################################# 106 | .metadata 107 | bin/ 108 | tmp/ 109 | *.tmp 110 | *.bak 111 | *.swp 112 | *~.nib 113 | local.properties 114 | .settings/ 115 | .loadpath 116 | .recommenders 117 | 118 | # External tool builders 119 | .externalToolBuilders/ 120 | 121 | # Locally stored "Eclipse launch configurations" 122 | *.launch 123 | 124 | # PyDev specific (Python IDE for Eclipse) 125 | *.pydevproject 126 | 127 | # CDT-specific (C/C++ Development Tooling) 128 | .cproject 129 | 130 | # CDT- autotools 131 | .autotools 132 | 133 | # Java annotation processor (APT) 134 | .factorypath 135 | 136 | # PDT-specific (PHP Development Tools) 137 | .buildpath 138 | 139 | # sbteclipse plugin 140 | .target 141 | 142 | # Tern plugin 143 | .tern-project 144 | 145 | # TeXlipse plugin 146 | .texlipse 147 | 148 | # STS (Spring Tool Suite) 149 | .springBeans 150 | 151 | # Code Recommenders 152 | .recommenders/ 153 | 154 | # Annotation Processing 155 | .apt_generated/ 156 | .apt_generated_test/ 157 | 158 | # Scala IDE specific (Scala & Java development for Eclipse) 159 | .cache-main 160 | .scala_dependencies 161 | .worksheet 162 | 163 | ############################################# 164 | # java project.gitignore local 165 | ############################################# 166 | 167 | # Compiled class file 168 | *.class 169 | 170 | # Log file 171 | *.log 172 | 173 | # BlueJ files 174 | *.ctxt 175 | 176 | # Mobile Tools for Java (J2ME) 177 | .mtj.tmp/ 178 | 179 | # Package Files # 180 | *.jar 181 | *.war 182 | *.nar 183 | *.ear 184 | *.zip 185 | *.tar.gz 186 | *.rar 187 | *.tar 188 | 189 | # virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml 190 | hs_err_pid* 191 | 192 | /docker/web/* 193 | -------------------------------------------------------------------------------- /CSS/main.css: -------------------------------------------------------------------------------- 1 |  2 | /*Main.aspx的样式*/ 3 | body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, p, blockquote 4 | { 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | * 10 | { 11 | font-family: "微软雅黑"; 12 | font-size: 13px; 13 | } 14 | 15 | h2 16 | { 17 | font-size: 18px; 18 | font-weight: bold; 19 | margin: 0; 20 | margin-bottom: 15px; 21 | } 22 | 23 | .demo-info 24 | { 25 | background: #FFFEE6; 26 | color: #8F5700; 27 | padding: 12px; 28 | } 29 | 30 | .demo-tip 31 | { 32 | width: 16px; 33 | height: 16px; 34 | margin-right: 8px; 35 | float: left; 36 | } 37 | 38 | /*----------------------------工具箱----------------------------- 39 | *2014-6-4 40 | */ 41 | #tools a 42 | { 43 | width: 20px; 44 | height: 20px; 45 | border: 1px solid #95B8E7; 46 | margin: 3px; 47 | } 48 | 49 | /*begin--------------------菜单下面的选项区------------------------ 50 | *2014-6-4 51 | *yf 52 | */ 53 | #alloption 54 | { 55 | position: absolute; 56 | margin-top: 8px; 57 | } 58 | 59 | #alloption li 60 | { 61 | float: left; 62 | list-style: none; 63 | } 64 | 65 | #alloption li select, #penwidthshow, #alphashow, #ptpenBlurShow 66 | { 67 | width: 50px; 68 | } 69 | 70 | 71 | /*end--------------------菜单下面的选项区------------------------*/ 72 | 73 | /*html原始的输入框*/ 74 | .txtInputStyle 75 | { 76 | border: 1px solid #95B8E7; 77 | } 78 | 79 | /*画布阴影效果及样式*/ 80 | .drawWindow 81 | { 82 | background-color: White; 83 | margin: 5px auto 0 auto; 84 | border: 1px solid #95B8E7; 85 | -moz-box-shadow: 3px 3px 4px #95B8E7; 86 | -webkit-box-shadow: 3px 3px 4px #95B8E7; 87 | box-shadow: 3px 3px 4px #95B8E7; 88 | } 89 | 90 | /*begin------------------画布-------------------------------------- 91 | */ 92 | #showcanvas /*最终展示画布在最外层*/ 93 | { 94 | z-index: 2; 95 | border: 1px solid gray; 96 | cursor: crosshair; 97 | } 98 | 99 | #tempcanvas /*临时画布在内层*/ 100 | { 101 | z-index: 1; 102 | background-color: White; 103 | border: 1px solid gray; 104 | cursor: crosshair; 105 | } 106 | 107 | #gridcanvas 108 | { /*网格画布*/ 109 | cursor: crosshair; 110 | } 111 | 112 | .drawWindow canvas 113 | { 114 | position: absolute; 115 | } 116 | 117 | .newCanvas 118 | { /*新增的图层*/ 119 | border: 1px solid gray; 120 | cursor: crosshair; 121 | } 122 | /*end------------------画布------------------------------------ 123 | 124 | /*协同处理下的表情*/ 125 | #mnfaces img:hover, #mnfacesgrp img:hover 126 | { 127 | border: 1px solid #083C86; 128 | } 129 | 130 | /*快捷键样式*/ 131 | .quickevent 132 | { 133 | margin-left: 50px; 134 | } 135 | 136 | /*快捷键效果处理样式*/ 137 | .quickeventeffect 138 | { 139 | margin-left: 20px; 140 | } 141 | -------------------------------------------------------------------------------- /Code/About.htm: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 关于WebPhotoshop 5 | 12 | 13 | 14 |
15 | 16 | WebPhotoshop 17 |
18 |
19 |
20 |

WebPhotoshop

21 |

版本：1.0(精简版)

22 |

发表日期：2015-05-01

23 |

Copyright © Tim

24 |
25 |
26 |
27 |
28 |
29 |
30 | 31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /Code/Help.htm: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | WebPhotoshop帮助文档 5 | 10 | 11 | 12 |
13 |

WebPhotoshop帮助文档

14 |
15 |

16 |       WebPhotoshop，是利用HTML5技术在Web上实现对图形图像的处理，同时实现实时的多人协作处理图形图像技术，构建易维护、易共享、易于拓展、实时性的Web图形图像处理平台。 17 | 功能主要包括：图形绘制、图像处理、图像操作、多人协作操作图像、实时交流、图片搜索。 18 |

19 |

一、功能说明：

20 |

1、图形绘制

21 |
      实现铅笔、画笔（书法画笔、喷枪、蜡笔、记号笔、水彩画笔）的绘制效果。实现直线、曲线、椭圆（圆）、矩形（圆角矩形）、三角形（直角三角形、等边三角形、任意三角形）、多边形的绘制。绘制过程中，可以选择颜色，选择颜色有两种方式：颜色选择、颜色拾取。可以进行颜色填充，即对选定区域，用选择的颜色进行填充。
22 |

2、图像处理

23 |
      能够实现的效果有：黑白、模糊、亮度/透明度、反色、雾化、锐化、浮雕、雕刻、柔化、油画、积木、怀旧、蒙版，蒙版包括：红色蒙版、蓝色蒙版、绿色蒙版。
24 |

3、图像操作

25 |
      能够对图像进行的操作有：图像选择，包括区域选择、对象选择。图像移动，即对选择区域或对象的移动。图像裁剪，包括矩形裁剪（保留裁剪区内、保留裁剪区外）。图像的旋转，即将画布或者选择的区域对象向右90度、向左90度、180度、垂直旋转、水平旋转、任意度数。橡皮擦效果，能够擦除绘制的图像。图像的缩小放大，包括图像的局部缩放和图像的整体缩放。插入文本，即在图像上插入文本，能够改变文本颜色、字体、大小，实现加粗、倾斜、下划线、删除线效果。将图像保存为图片。将图像存到服务器。将图像另存为其他格式。图像保存为下次可以再进行编辑的自定义格式。能够实现多图层，即添加图层、删除图层、图层层次改变。
26 |

4、多人协作操作图像

27 |
      实现多人在线协同绘制、处理图像。
28 |

5、实时交流

29 |
      在多人协同处理图像的过程中，参与协同操作的成员，能够进行文本交流，即发送和接收文字、表情、图片，语音交流，视频交流，发送截图，抖动窗口，发送文件和接收文件。还可以请求对方位置及地图上显示。交流过程中，可以建立组，进行群交流。
30 |

6、图片搜索

31 |
      搜索服务器上的图片，点击图片后，则可以进行图片的编辑。
32 |

二、操作流程：

33 |

1) 进入系统后，显示主工作区，包括菜单栏、选项栏、工具箱、主画板、历史记录、图层管理。

34 |

2) 默认为铅笔，可以在主工作区画图。可以选择颜色等属性。

35 |

3) 打开图片，进行图片编辑。

36 |

4) 点击登录，进入在线协作，选择加入组，或者新建组。

37 | 38 | 39 | -------------------------------------------------------------------------------- /Code/SelectImg.html: -------------------------------------------------------------------------------- 1 |  5 | 6 | 7 | 8 | 图片选择 9 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 55 | 56 | 57 |
58 |
59 |

60 | 选择图片： 61 |

62 |
63 | 64 | 65 | 73 | 81 | 89 | 97 | 105 | 113 | 121 | 122 |
66 |
67 | 68 |
69 |
70 | a.jpg 71 |
72 | 		74 |
75 | 76 |
77 |
78 | b.jpg 79 |
80 | 		82 |
83 | 84 |
85 |
86 | c.jpg 87 |
88 | 		90 |
91 | 92 |
93 |
94 | b.jpg 95 |
96 | 		98 |
99 | 100 |
101 |
102 | star.jpg 103 |
104 | 		106 |
107 | 108 |
109 |
110 | bird.jpg 111 |
112 | 		114 |
115 | 116 |
117 |
118 | win.jpg 119 |
120 |
123 |
124 |
125 | 图片名： 126 | 127 | 确定 取消 129 |
130 |
131 |
132 | 133 | 163 | 164 | -------------------------------------------------------------------------------- /Code/readme.txt: -------------------------------------------------------------------------------- 1 | 存放前端开发代码 -------------------------------------------------------------------------------- /Images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/1.png -------------------------------------------------------------------------------- /Images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/2.png -------------------------------------------------------------------------------- /Images/files/a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/files/a.jpg -------------------------------------------------------------------------------- /Images/files/b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/files/b.jpg -------------------------------------------------------------------------------- /Images/files/bird.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/files/bird.png -------------------------------------------------------------------------------- /Images/files/c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/files/c.jpg -------------------------------------------------------------------------------- /Images/files/desk_005.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/files/desk_005.jpg -------------------------------------------------------------------------------- /Images/files/star.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/files/star.jpg -------------------------------------------------------------------------------- /Images/files/win.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/files/win.jpg -------------------------------------------------------------------------------- /Images/log.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/log.ico -------------------------------------------------------------------------------- /Images/tools/Alpha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/Alpha.png -------------------------------------------------------------------------------- /Images/tools/Clone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/Clone.png -------------------------------------------------------------------------------- /Images/tools/Curve.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/Curve.png -------------------------------------------------------------------------------- /Images/tools/Ellipse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/Ellipse.png -------------------------------------------------------------------------------- /Images/tools/Eraser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/Eraser.png -------------------------------------------------------------------------------- /Images/tools/Fill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/Fill.png -------------------------------------------------------------------------------- /Images/tools/Gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/Gradient.png -------------------------------------------------------------------------------- /Images/tools/Hand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/Hand.png -------------------------------------------------------------------------------- /Images/tools/Lasso.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/Lasso.png -------------------------------------------------------------------------------- /Images/tools/Line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/Line.png -------------------------------------------------------------------------------- /Images/tools/Move.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/Move.png -------------------------------------------------------------------------------- /Images/tools/OtherShap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/OtherShap.png -------------------------------------------------------------------------------- /Images/tools/PaintBrush.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/PaintBrush.png -------------------------------------------------------------------------------- /Images/tools/Pencil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/Pencil.png -------------------------------------------------------------------------------- /Images/tools/Polygon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/Polygon.png -------------------------------------------------------------------------------- /Images/tools/Rectangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/Rectangle.png -------------------------------------------------------------------------------- /Images/tools/Select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/Select.png -------------------------------------------------------------------------------- /Images/tools/SelectCut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/SelectCut.png -------------------------------------------------------------------------------- /Images/tools/Text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/Text.png -------------------------------------------------------------------------------- /Images/tools/Triangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/Triangle.png -------------------------------------------------------------------------------- /Images/tools/ZoomAll.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/ZoomAll.png -------------------------------------------------------------------------------- /Images/tools/ZoomMiro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/Images/tools/ZoomMiro.png -------------------------------------------------------------------------------- /JScript/CodeJS/changeTheme.js: -------------------------------------------------------------------------------- 1 | //#region 更换皮肤 2 | 3 | //更换皮肤 4 | function onChangeTheme(theme) { 5 | switch (theme) { 6 | case 'default': 7 | //该项为选中状态 8 | $('#default').css("background-color", "#C9D3E2"); 9 | //其他为非选中状态 10 | $('#bootstrap').css("background-color", ""); 11 | $('#metro-blue').css("background-color", ""); 12 | $('#metro-green').css("background-color", ""); 13 | $('#metro-red').css("background-color", ""); 14 | break; 15 | case 'bootstrap': 16 | //该项为选中状态 17 | $('#bootstrap').css("background-color", "#C9D3E2"); 18 | //其他为非选中状态 19 | $('#default').css("background-color", ""); 20 | $('#metro-blue').css("background-color", ""); 21 | $('#metro-green').css("background-color", ""); 22 | $('#metro-red').css("background-color", ""); 23 | break; 24 | case 'metro-blue': 25 | //该项为选中状态 26 | $('#metro-blue').css("background-color", "#C9D3E2"); 27 | //其他为非选中状态 28 | $('#bootstrap').css("background-color", ""); 29 | $('#default').css("background-color", ""); 30 | $('#metro-green').css("background-color", ""); 31 | $('#metro-red').css("background-color", ""); 32 | break; 33 | case 'metro-green': 34 | //该项为选中状态 35 | $('#metro-green').css("background-color", "#C9D3E2"); 36 | //其他为非选中状态 37 | $('#bootstrap').css("background-color", ""); 38 | $('#metro-blue').css("background-color", ""); 39 | $('#default').css("background-color", ""); 40 | $('#metro-red').css("background-color", ""); 41 | break; 42 | case 'metro-red': 43 | //该项为选中状态 44 | $('#metro-red').css("background-color", "#C9D3E2"); 45 | //其他为非选中状态 46 | $('#bootstrap').css("background-color", ""); 47 | $('#metro-blue').css("background-color", ""); 48 | $('#metro-green').css("background-color", ""); 49 | $('#default').css("background-color", ""); 50 | break; 51 | } 52 | //更换皮肤 53 | var link = $('#content').find('link:first'); 54 | link.attr('href', 'JScript/jquery-easyui/themes/' + theme + '/easyui.css'); 55 | } 56 | 57 | //#endregion 58 | -------------------------------------------------------------------------------- /JScript/CodeJS/fullscreen.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 全屏切换，在Chrome下支持 3 | * 2015-1-28，北京 4 | */ 5 | function fullscreen() { 6 | var body = document.body; 7 | var status = !document.fullscreenElement && // get the screen status 8 | !document.msFullscreenElement && 9 | !document.mozFullscreenElement && 10 | !document.webkitFullscreenElement; 11 | 12 | if (status) { 13 | if (body.requestFullscreen) { 14 | body.requestFullscreen(); 15 | } else if (body.mozRequestFullscreen) { 16 | body.mozRequestFullscreen(); 17 | } else if (body.webkitRequestFullscreen) { 18 | body.webkitRequestFullscreen(); 19 | } else if (body.msRequestFullscreen) { 20 | //body.msRequestFUllscreen(); 21 | } 22 | } else { 23 | if (document.exitFullscreen) { 24 | document.exitFullscreen(); 25 | } else if (document.mozExitFullscreen) { 26 | document.mozExitFullscreen(); 27 | } else if (document.webkitExitFullscreen) { 28 | document.webkitExitFullscreen(); 29 | } else if (document.msExitFullscreen) { 30 | document.msExitFullscreen(); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /JScript/CodeJS/keypressEvent.js: -------------------------------------------------------------------------------- 1 | //键盘快捷键 2 | 3 | //文件菜单 4 | Mousetrap.bind('alt+f', function (e) { 5 | if (e.preventDefault) { 6 | e.preventDefault(); 7 | } else { 8 | // internet explorer 9 | e.returnValue = false; 10 | //e.cancel = true; 11 | } 12 | alert("123"); 13 | //$("#menumnFile").hover(); 14 | 15 | //$("#menumnFile").addClass("menu-active"); 16 | 17 | }); 18 | 19 | //#region 文件 20 | 21 | //打开 22 | Mousetrap.bind('ctrl+g', function (e) { 23 | fileOpen(); 24 | }); 25 | 26 | //获取 27 | Mousetrap.bind('ctrl+m', function (e) { 28 | imgFromCamera(); 29 | }); 30 | 31 | //#endregion 32 | 33 | //#region 编辑 34 | 35 | //撤销 36 | Mousetrap.bind('ctrl+z', function (e) { 37 | undo(); 38 | }); 39 | 40 | //重做 41 | Mousetrap.bind('ctrl+y', function (e) { 42 | redo(); 43 | }); 44 | 45 | //清空 46 | Mousetrap.bind('ctrl+q', function (e) { 47 | $.messager.confirm('确定', '确定清空当前画布？', function (r) { 48 | if (r) { 49 | reset(); 50 | } 51 | }); 52 | }); 53 | 54 | //#endregion 55 | 56 | //#region 效果 57 | 58 | //黑白 59 | Mousetrap.bind('ctrl+shift+w', function (e) { 60 | tobalckwhite(); 61 | }); 62 | 63 | //反色 64 | Mousetrap.bind('ctrl+shift+i', function (e) { 65 | inverse(); 66 | }); 67 | 68 | //模糊 69 | Mousetrap.bind('ctrl+shift+b', function (e) { 70 | blur(); 71 | }); 72 | 73 | //雾化 74 | Mousetrap.bind('ctrl+shift+m', function (e) { 75 | wuhuaView(); 76 | }); 77 | 78 | //锐化 79 | Mousetrap.bind('ctrl+shift+s', function (e) { 80 | sharpen(); 81 | }); 82 | 83 | //浮雕 84 | Mousetrap.bind('ctrl+shift+f', function (e) { 85 | selaFloat(); 86 | }); 87 | 88 | //柔化 89 | Mousetrap.bind('ctrl+shift+t', function (e) { 90 | conslateSoft(); 91 | }); 92 | 93 | //油画 94 | Mousetrap.bind('ctrl+shift+p', function (e) { 95 | conslatepainting(); 96 | }); 97 | 98 | //积木 99 | Mousetrap.bind('ctrl+shift+d', function (e) { 100 | conslatewood(); 101 | }); 102 | 103 | //雕刻 104 | Mousetrap.bind('ctrl+shift+v', function (e) { 105 | diaokeView(); 106 | }); 107 | 108 | //怀旧 109 | Mousetrap.bind('ctrl+shift+o', function (e) { 110 | turnOld(); 111 | }); 112 | 113 | //红色蒙版 114 | Mousetrap.bind('ctrl+shift+r', function (e) { 115 | turnRed(); 116 | }); 117 | 118 | //绿色蒙版 119 | Mousetrap.bind('ctrl+shift+g', function (e) { 120 | turnGreen(); 121 | }); 122 | 123 | //蓝色蒙版 124 | Mousetrap.bind('ctrl+shift+b', function (e) { 125 | turnBlue(); 126 | }); 127 | 128 | //#endregion 129 | 130 | //#region工具箱 131 | 132 | //选择工具 133 | Mousetrap.bind('s', function (e) { 134 | $("#btnSelect").click(); 135 | }); 136 | 137 | //移动工具 138 | Mousetrap.bind('m', function (e) { 139 | $("#btnMove").click(); 140 | }); 141 | 142 | //套索工具 143 | Mousetrap.bind('a', function (e) { 144 | $("#btnLasso").click(); 145 | }); 146 | 147 | //缩放工具 148 | Mousetrap.bind('z', function (e) { 149 | $("#btnZoomAll").click(); 150 | }); 151 | 152 | //手抓工具 153 | Mousetrap.bind('h', function (e) { 154 | $("#btnHand").click(); 155 | }); 156 | 157 | //填充工具 158 | Mousetrap.bind('f', function (e) { 159 | $("#btnFill").click(); 160 | }); 161 | 162 | //渐变工具 163 | Mousetrap.bind('n', function (e) { 164 | $("#btnGradient").click(); 165 | }); 166 | 167 | //画笔 168 | Mousetrap.bind('b', function (e) { 169 | $("#btnPaintBrush").click(); 170 | }); 171 | 172 | //铅笔 173 | Mousetrap.bind('p', function (e) { 174 | $("#btnPaintBrush").click(); 175 | }); 176 | 177 | //橡皮擦 178 | Mousetrap.bind('e', function (e) { 179 | $("#btnEraser").click(); 180 | }); 181 | 182 | //放大镜 183 | Mousetrap.bind('o', function (e) { 184 | $("#btnZoomMiro").click(); 185 | }); 186 | 187 | //裁剪 188 | Mousetrap.bind('c', function (e) { 189 | $("#btnSelectCut").click(); 190 | }); 191 | 192 | //文本 193 | Mousetrap.bind('t', function (e) { 194 | $("#btnText").click(); 195 | }); 196 | 197 | //直线 198 | Mousetrap.bind('l', function (e) { 199 | $("#btnLine").click(); 200 | }); 201 | 202 | //曲线 203 | Mousetrap.bind('v', function (e) { 204 | $("#btnCurve").click(); 205 | }); 206 | 207 | //矩形 208 | Mousetrap.bind('r', function (e) { 209 | $("#btnRectangle").click(); 210 | }); 211 | 212 | //椭圆 213 | Mousetrap.bind('i', function (e) { 214 | $("#btnEllipse").click(); 215 | }); 216 | 217 | //三角形 218 | Mousetrap.bind('g', function (e) { 219 | $("#btnTriangle").click(); 220 | }); 221 | 222 | //多边形 223 | Mousetrap.bind('y', function (e) { 224 | $("#btnPolygon").click(); 225 | }); 226 | 227 | //其他形状 228 | Mousetrap.bind('w', function (e) { 229 | $("#btnOtherShap").click(); 230 | }); 231 | 232 | //图章 233 | Mousetrap.bind('x', function (e) { 234 | $("#btnClone").click(); 235 | }); 236 | 237 | //透明度 238 | Mousetrap.bind('d', function (e) { 239 | $("#btnAlpha").click(); 240 | }); 241 | 242 | //#endregion 243 | 244 | //#region视图 245 | 246 | //放大 247 | Mousetrap.bind('ctrl+up', function (e) { 248 | transforms.zoomin(); 249 | }); 250 | 251 | //缩小 252 | Mousetrap.bind('ctrl+down', function (e) { 253 | transforms.zoomout(); 254 | }); 255 | 256 | //#endregion 257 | 258 | //#region 259 | 260 | //帮助文档 261 | Mousetrap.bind('ctrl+f1', function (e) { 262 | window.open("Help.htm"); 263 | }); 264 | 265 | //#endregion 266 | 267 | -------------------------------------------------------------------------------- /JScript/CodeJS/readme.txt: -------------------------------------------------------------------------------- 1 | 存放程序的JS代码 -------------------------------------------------------------------------------- /JScript/Mousetrap/mousetrap.min.js: -------------------------------------------------------------------------------- 1 | /* mousetrap v1.4.6 craig.is/killing/mice */ 2 | (function(J,r,f){function s(a,b,d){a.addEventListener?a.addEventListener(b,d,!1):a.attachEvent("on"+b,d)}function A(a){if("keypress"==a.type){var b=String.fromCharCode(a.which);a.shiftKey||(b=b.toLowerCase());return b}return h[a.which]?h[a.which]:B[a.which]?B[a.which]:String.fromCharCode(a.which).toLowerCase()}function t(a){a=a||{};var b=!1,d;for(d in n)a[d]?b=!0:n[d]=0;b||(u=!1)}function C(a,b,d,c,e,v){var g,k,f=[],h=d.type;if(!l[a])return[];"keyup"==h&&w(a)&&(b=[a]);for(g=0;gg||h.hasOwnProperty(g)&&(p[h[g]]=g)}e=p[d]?"keydown":"keypress"}"keypress"==e&&f.length&&(e="keydown");return{key:c,modifiers:f,action:e}}function F(a,b,d,c,e){q[a+":"+d]=b;a=a.replace(/\s+/g," ");var f=a.split(" ");1":".","?":"/","|":"\\"},G={option:"alt",command:"meta","return":"enter",escape:"esc",mod:/Mac|iPod|iPhone|iPad/.test(navigator.platform)?"meta":"ctrl"},p,l={},q={},n={},D,z=!1,I=!1,u=!1;for(f=1;20>f;++f)h[111+f]="f"+f;for(f=0;9>=f;++f)h[f+96]=f;s(r,"keypress",y);s(r,"keydown",y);s(r,"keyup",y);var m={bind:function(a,b,d){a=a instanceof Array?a:[a];for(var c=0;c 8 | */ 9 | var Event = function () { 10 | "use strict"; 11 | this.attach = function (evtName, element, listener, capture) { 12 | var evt = '', 13 | useCapture = (capture === undefined) ? true : capture, 14 | handler = null; 15 | 16 | if (window.addEventListener === undefined) { 17 | evt = 'on' + evtName; 18 | handler = function (evt, listener) { 19 | element.attachEvent(evt, listener); 20 | return listener; 21 | }; 22 | } else { 23 | evt = evtName; 24 | handler = function (evt, listener, useCapture) { 25 | element.addEventListener(evt, listener, useCapture); 26 | return listener; 27 | }; 28 | } 29 | 30 | return handler.apply(element, [evt, function (ev) { 31 | var e = ev || event, 32 | src = e.srcElement || e.target; 33 | 34 | listener(e, src); 35 | }, useCapture]); 36 | }; 37 | 38 | this.detach = function (evtName, element, listener, capture) { 39 | var evt = '', 40 | useCapture = (capture === undefined) ? true : capture; 41 | 42 | if (window.removeEventListener === undefined) { 43 | evt = 'on' + evtName; 44 | element.detachEvent(evt, listener); 45 | } else { 46 | evt = evtName; 47 | element.removeEventListener(evt, listener, useCapture); 48 | } 49 | }; 50 | 51 | this.stop = function (evt) { 52 | evt.cancelBubble = true; 53 | 54 | if (evt.stopPropagation) { 55 | evt.stopPropagation(); 56 | } 57 | }; 58 | 59 | this.prevent = function (evt) { 60 | if (evt.preventDefault) { 61 | evt.preventDefault(); 62 | } else { 63 | evt.returnValue = false; 64 | } 65 | }; 66 | }; -------------------------------------------------------------------------------- /JScript/RulersGuides/RulersGuides.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/JScript/RulersGuides/RulersGuides.js -------------------------------------------------------------------------------- /JScript/jpicker-1.1.6/css/jPicker-1.1.6.css: -------------------------------------------------------------------------------- 1 |  2 | 3 | .jPicker .Icon 4 | { 5 | display: inline-block; 6 | height: 50px; /* change this value if using a different sized color picker icon */ 7 | position: relative; /* make this element an absolute positioning container */ 8 | text-align: left; /* make the zero width children position to the left of container */ 9 | width: 68px; /* change this value if using a different sized color picker icon */ 10 | border: 1px solid #41D0F4; 11 | padding: 0 1px 0 1px; /* border radius */ 12 | -moz-border-radius: 8px; 13 | -khtml-border-radius: 8px; 14 | -webkit-border-radius: 8px; 15 | border-radius: 8px; 16 | margin-top: 2px; 17 | } 18 | .jPicker .Icon span.Color, .jPicker .Icon span.Alpha 19 | { 20 | background-position: 2px 2px; 21 | display: block; 22 | height: 100%; 23 | left: 0px; 24 | position: absolute; 25 | top: 0px; 26 | width: 100%; 27 | -moz-border-radius: 8px; 28 | -khtml-border-radius: 8px; 29 | -webkit-border-radius: 8px; 30 | border-radius: 8px; 31 | } 32 | .jPicker .Icon span.Image 33 | { 34 | background-repeat: no-repeat; 35 | cursor: pointer; 36 | display: block; 37 | height: 100%; 38 | left: 0px; 39 | position: absolute; 40 | top: 0px; 41 | width: 100%; 42 | } 43 | .jPicker.Container 44 | { 45 | color: #000; 46 | z-index: 10; 47 | } 48 | table.jPicker 49 | { 50 | background-color: #efefef; 51 | border: 1px outset #95B8E7; 52 | font-family: Arial, Helvetica, Sans-Serif; 53 | font-size: 12px !important; 54 | margin: 0px; 55 | width: 545px; 56 | z-index: 20; 57 | box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); /* border radius */ 58 | -moz-border-radius: 5px; 59 | -khtml-border-radius: 5px; 60 | -webkit-border-radius: 5px; 61 | border-radius: 5px; 62 | } 63 | .jPicker .Move 64 | { 65 | background-color: #ECF3FF; 66 | border:1px solid #95B8E7; 67 | cursor: move; 68 | height: 13px; 69 | text-align: left; 70 | color: #0E2D5F; 71 | font-size: 13px; 72 | } 73 | .jPicker .Move .Close 74 | { 75 | float: right; 76 | cursor: default; 77 | } 78 | 79 | .jPicker .Move .Close:hover 80 | { 81 | border: 1px solid #59B4D4; 82 | -moz-border-radius: 5px; 83 | -khtml-border-radius: 5px; 84 | -webkit-border-radius: 5px; 85 | border-radius: 5px; 86 | } 87 | 88 | .jPicker .Title 89 | { 90 | font-size: 10px !important; 91 | margin: -2px 0px 0px 0px; 92 | padding: 10px 0px 0px 0px; 93 | text-align: center; 94 | width: 100%; 95 | } 96 | .jPicker div.Map 97 | { 98 | border-bottom: 2px solid #fff; 99 | border-left: 2px solid #9a9a9a; 100 | border-right: 2px solid #fff; 101 | border-top: 2px solid #9a9a9a; 102 | cursor: crosshair; 103 | height: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */ 104 | margin: 0px 10px 10px 10px; 105 | overflow: hidden; /* hide the overdraw of the Color Map icon when at edge of viewing box */ 106 | padding: 0px; 107 | position: relative; /* make this element an absolute positioning container */ 108 | width: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */ 109 | } 110 | .jPicker div[class="Map"] 111 | { 112 | height: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */ 113 | width: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */ 114 | } 115 | .jPicker div.Bar 116 | { 117 | border-bottom: 2px solid #fff; 118 | border-left: 2px solid #9a9a9a; 119 | border-right: 2px solid #fff; 120 | border-top: 2px solid #9a9a9a; 121 | cursor: n-resize; 122 | height: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */ 123 | margin: 12px 10px 0px 5px; 124 | overflow: hidden; 125 | padding: 0px; 126 | position: relative; 127 | width: 24px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 20px later */ 128 | } 129 | .jPicker div[class="Bar"] 130 | { 131 | height: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */ 132 | width: 20px; /* correct to 20px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */ 133 | } 134 | .jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Map .Map3, .jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4, .jPicker .Bar .Map5, .jPicker .Bar .Map6 135 | { 136 | background-color: transparent; 137 | background-image: none; 138 | display: block; 139 | left: 0px; 140 | position: absolute; 141 | top: 0px; 142 | } 143 | .jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Map .Map3 144 | { 145 | height: 2596px; 146 | width: 256px; /* must specify pixel width. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar would not be drawn if its overflow is set to hidden. */ 147 | } 148 | .jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4 149 | { 150 | height: 3896px; 151 | width: 20px; /* must specify pixel width. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar would not be drawn if its overflow is set to hidden. */ 152 | } 153 | .jPicker .Bar .Map5, .jPicker .Bar .Map6 154 | { 155 | height: 256px; 156 | width: 20px; /* must specify pixel width. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar would not be drawn if its overflow is set to hidden. */ 157 | } 158 | .jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Bar .Map6 159 | { 160 | background-repeat: no-repeat; 161 | } 162 | .jPicker .Map .Map3, .jPicker .Bar .Map5 163 | { 164 | background-repeat: repeat; 165 | } 166 | .jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4 167 | { 168 | background-repeat: repeat-x; 169 | } 170 | .jPicker .Map .Arrow 171 | { 172 | display: block; 173 | position: absolute; 174 | } 175 | .jPicker .Bar .Arrow 176 | { 177 | display: block; 178 | left: 0px; /* (arrow width / 2) - (element width / 2) - position arrows' center in elements' center */ 179 | position: absolute; 180 | } 181 | .jPicker .Preview 182 | { 183 | font-size: 9px; 184 | padding: 5px 0px 0px 0px; 185 | text-align: center; 186 | } 187 | .jPicker .Preview div 188 | { 189 | border: 2px inset #eee; 190 | height: 62px; 191 | margin: 0px auto; 192 | padding: 0px; 193 | width: 62px; 194 | } 195 | .jPicker .Preview div span 196 | { 197 | border: 1px solid #000; 198 | display: block; 199 | height: 30px; 200 | margin: 0px auto; 201 | padding: 0px; 202 | width: 60px; 203 | } 204 | .jPicker .Preview .Active 205 | { 206 | border-bottom-width: 0px; 207 | } 208 | .jPicker .Preview .Current 209 | { 210 | border-top-width: 0px; 211 | cursor: pointer; 212 | } 213 | .jPicker input 214 | { 215 | font-size: 13px; 216 | } 217 | .jPicker .Button 218 | { 219 | text-align: center; 220 | padding: 0px 4px; 221 | width: 115px; 222 | } 223 | .jPicker .Button input 224 | { 225 | padding: 2px 0px; 226 | width: 100px; 227 | } 228 | .jPicker .Button .Ok 229 | { 230 | margin: 12px 0px 5px 0px; 231 | } 232 | .jPicker td 233 | { 234 | margin: 0px; 235 | padding: 0px; 236 | } 237 | .jPicker td.Radio 238 | { 239 | margin: 0px; 240 | padding: 0px; 241 | width: 31px; 242 | } 243 | .jPicker td.Radio input 244 | { 245 | margin: 0px 5px 0px 0px; 246 | padding: 0px; 247 | } 248 | .jPicker td.Text 249 | { 250 | font-size: 12px !important; 251 | height: 22px; 252 | margin: 0px; 253 | padding: 0px; 254 | text-align: left; 255 | width: 70px; 256 | } 257 | .jPicker tr.Hex td.Text 258 | { 259 | width: 100px; 260 | } 261 | .jPicker td.Text input 262 | { 263 | background-color: #fff; 264 | border: 1px inset #aaa; 265 | height: 19px; 266 | margin: 0px 0px 0px 5px; 267 | text-align: left; 268 | width: 30px; 269 | } 270 | .jPicker td[class="Text"] input 271 | { 272 | height: 15px; 273 | } 274 | .jPicker tr.Hex td.Text input.Hex 275 | { 276 | width: 50px; 277 | } 278 | .jPicker tr.Hex td.Text input.AHex 279 | { 280 | width: 20px; 281 | } 282 | .jPicker .Grid 283 | { 284 | text-align: center; 285 | width: 114px; 286 | } 287 | .jPicker .Grid span.QuickColor 288 | { 289 | border: 1px inset #aaa; 290 | cursor: pointer; 291 | display: inline-block; 292 | height: 15px; 293 | line-height: 15px; 294 | margin: 0px; 295 | padding: 0px; 296 | width: 19px; 297 | } 298 | .jPicker .Grid span[class="QuickColor"] 299 | { 300 | width: 17px; 301 | } 302 | -------------------------------------------------------------------------------- /JScript/jpicker-1.1.6/images/AlphaBar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/JScript/jpicker-1.1.6/images/AlphaBar.png -------------------------------------------------------------------------------- /JScript/jpicker-1.1.6/images/Bars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/JScript/jpicker-1.1.6/images/Bars.png -------------------------------------------------------------------------------- /JScript/jpicker-1.1.6/images/Maps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/JScript/jpicker-1.1.6/images/Maps.png -------------------------------------------------------------------------------- /JScript/jpicker-1.1.6/images/NoColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/JScript/jpicker-1.1.6/images/NoColor.png -------------------------------------------------------------------------------- /JScript/jpicker-1.1.6/images/bar-opacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/JScript/jpicker-1.1.6/images/bar-opacity.png -------------------------------------------------------------------------------- /JScript/jpicker-1.1.6/images/close.bmp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/JScript/jpicker-1.1.6/images/close.bmp -------------------------------------------------------------------------------- /JScript/jpicker-1.1.6/images/map-opacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/JScript/jpicker-1.1.6/images/map-opacity.png -------------------------------------------------------------------------------- /JScript/jpicker-1.1.6/images/mappoint.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/JScript/jpicker-1.1.6/images/mappoint.gif -------------------------------------------------------------------------------- /JScript/jpicker-1.1.6/images/picker.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/JScript/jpicker-1.1.6/images/picker.gif -------------------------------------------------------------------------------- /JScript/jpicker-1.1.6/images/preview-opacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/JScript/jpicker-1.1.6/images/preview-opacity.png -------------------------------------------------------------------------------- /JScript/jpicker-1.1.6/images/rangearrows.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/e8cae581f756e96d14566f55bef71ba9790e93e2/JScript/jpicker-1.1.6/images/rangearrows.gif -------------------------------------------------------------------------------- /JScript/jpicker-1.1.6/jPicker.css: -------------------------------------------------------------------------------- 1 | @media all 2 | { 3 | #jPicker 4 | { 5 | margin: 0px 8px; 6 | text-align: left; 7 | } 8 | #jPicker ul 9 | { 10 | font-size: 15px; 11 | margin: 0px 0px 0px 15px; 12 | padding: 0px; 13 | } 14 | #jPicker ul li 15 | { 16 | list-style: disc; 17 | padding: 2px 0px; 18 | } 19 | #jPicker ul li ul 20 | { 21 | margin-bottom: 10px; 22 | } 23 | #jPicker ul li ul li 24 | { 25 | list-style: circle; 26 | } 27 | #jPicker p 28 | { 29 | font-size: 13px; 30 | padding: 0px 10px; 31 | } 32 | #jPicker hr 33 | { 34 | clear: both; 35 | } 36 | #jPicker h2.jPicker 37 | { 38 | font-size: 16px; 39 | padding: 20px 10px; 40 | } 41 | #jPicker code 42 | { 43 | color: #8bd; 44 | font-size: 14px; 45 | font-weight: bold; 46 | } 47 | #jPicker pre 48 | { 49 | background: #eee; 50 | border: 1px solid #000; 51 | color: #000; 52 | display: block; 53 | font-size: 11px; 54 | margin: 10px 5px; 55 | padding: 5px; 56 | } 57 | #jPicker span 58 | { 59 | font-size: 13px; 60 | text-align: center; 61 | } 62 | #jPicker a 63 | { 64 | color: #ff8050; 65 | } 66 | #jPicker input 67 | { 68 | font-size: 13px; 69 | padding: 2px 5px; 70 | } 71 | #jPicker h2 72 | { 73 | font-size: 16px; 74 | margin: 10px 0px; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /JScript/jquery-easyui/easyloader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jQuery EasyUI 1.3.5 3 | * 4 | * Copyright (c) 2009-2013 www.jeasyui.com. All rights reserved. 5 | * 6 | * Licensed under the GPL or commercial licenses 7 | * To use it on other terms please contact us: info@jeasyui.com 8 | * http://www.gnu.org/licenses/gpl.txt 9 | * http://www.jeasyui.com/license_commercial.php 10 | * 11 | */ 12 | (function(){ 13 | var _1={draggable:{js:"jquery.draggable.js"},droppable:{js:"jquery.droppable.js"},resizable:{js:"jquery.resizable.js"},linkbutton:{js:"jquery.linkbutton.js",css:"linkbutton.css"},progressbar:{js:"jquery.progressbar.js",css:"progressbar.css"},tooltip:{js:"jquery.tooltip.js",css:"tooltip.css"},pagination:{js:"jquery.pagination.js",css:"pagination.css",dependencies:["linkbutton"]},datagrid:{js:"jquery.datagrid.js",css:"datagrid.css",dependencies:["panel","resizable","linkbutton","pagination"]},treegrid:{js:"jquery.treegrid.js",css:"tree.css",dependencies:["datagrid"]},propertygrid:{js:"jquery.propertygrid.js",css:"propertygrid.css",dependencies:["datagrid"]},panel:{js:"jquery.panel.js",css:"panel.css"},window:{js:"jquery.window.js",css:"window.css",dependencies:["resizable","draggable","panel"]},dialog:{js:"jquery.dialog.js",css:"dialog.css",dependencies:["linkbutton","window"]},messager:{js:"jquery.messager.js",css:"messager.css",dependencies:["linkbutton","window","progressbar"]},layout:{js:"jquery.layout.js",css:"layout.css",dependencies:["resizable","panel"]},form:{js:"jquery.form.js"},menu:{js:"jquery.menu.js",css:"menu.css"},tabs:{js:"jquery.tabs.js",css:"tabs.css",dependencies:["panel","linkbutton"]},menubutton:{js:"jquery.menubutton.js",css:"menubutton.css",dependencies:["linkbutton","menu"]},splitbutton:{js:"jquery.splitbutton.js",css:"splitbutton.css",dependencies:["menubutton"]},accordion:{js:"jquery.accordion.js",css:"accordion.css",dependencies:["panel"]},calendar:{js:"jquery.calendar.js",css:"calendar.css"},combo:{js:"jquery.combo.js",css:"combo.css",dependencies:["panel","validatebox"]},combobox:{js:"jquery.combobox.js",css:"combobox.css",dependencies:["combo"]},combotree:{js:"jquery.combotree.js",dependencies:["combo","tree"]},combogrid:{js:"jquery.combogrid.js",dependencies:["combo","datagrid"]},validatebox:{js:"jquery.validatebox.js",css:"validatebox.css",dependencies:["tooltip"]},numberbox:{js:"jquery.numberbox.js",dependencies:["validatebox"]},searchbox:{js:"jquery.searchbox.js",css:"searchbox.css",dependencies:["menubutton"]},spinner:{js:"jquery.spinner.js",css:"spinner.css",dependencies:["validatebox"]},numberspinner:{js:"jquery.numberspinner.js",dependencies:["spinner","numberbox"]},timespinner:{js:"jquery.timespinner.js",dependencies:["spinner"]},tree:{js:"jquery.tree.js",css:"tree.css",dependencies:["draggable","droppable"]},datebox:{js:"jquery.datebox.js",css:"datebox.css",dependencies:["calendar","combo"]},datetimebox:{js:"jquery.datetimebox.js",dependencies:["datebox","timespinner"]},slider:{js:"jquery.slider.js",dependencies:["draggable"]},tooltip:{js:"jquery.tooltip.js"},parser:{js:"jquery.parser.js"}}; 14 | var _2={"af":"easyui-lang-af.js","ar":"easyui-lang-ar.js","bg":"easyui-lang-bg.js","ca":"easyui-lang-ca.js","cs":"easyui-lang-cs.js","cz":"easyui-lang-cz.js","da":"easyui-lang-da.js","de":"easyui-lang-de.js","el":"easyui-lang-el.js","en":"easyui-lang-en.js","es":"easyui-lang-es.js","fr":"easyui-lang-fr.js","it":"easyui-lang-it.js","jp":"easyui-lang-jp.js","nl":"easyui-lang-nl.js","pl":"easyui-lang-pl.js","pt_BR":"easyui-lang-pt_BR.js","ru":"easyui-lang-ru.js","sv_SE":"easyui-lang-sv_SE.js","tr":"easyui-lang-tr.js","zh_CN":"easyui-lang-zh_CN.js","zh_TW":"easyui-lang-zh_TW.js"}; 15 | var _3={}; 16 | function _4(_5,_6){ 17 | var _7=false; 18 | var _8=document.createElement("script"); 19 | _8.type="text/javascript"; 20 | _8.language="javascript"; 21 | _8.src=_5; 22 | _8.onload=_8.onreadystatechange=function(){ 23 | if(!_7&&(!_8.readyState||_8.readyState=="loaded"||_8.readyState=="complete")){ 24 | _7=true; 25 | _8.onload=_8.onreadystatechange=null; 26 | if(_6){ 27 | _6.call(_8); 28 | } 29 | } 30 | }; 31 | document.getElementsByTagName("head")[0].appendChild(_8); 32 | }; 33 | function _9(_a,_b){ 34 | _4(_a,function(){ 35 | document.getElementsByTagName("head")[0].removeChild(this); 36 | if(_b){ 37 | _b(); 38 | } 39 | }); 40 | }; 41 | function _c(_d,_e){ 42 | var _f=document.createElement("link"); 43 | _f.rel="stylesheet"; 44 | _f.type="text/css"; 45 | _f.media="screen"; 46 | _f.href=_d; 47 | document.getElementsByTagName("head")[0].appendChild(_f); 48 | if(_e){ 49 | _e.call(_f); 50 | } 51 | }; 52 | function _10(_11,_12){ 53 | _3[_11]="loading"; 54 | var _13=_1[_11]; 55 | var _14="loading"; 56 | var _15=(easyloader.css&&_13["css"])?"loading":"loaded"; 57 | if(easyloader.css&&_13["css"]){ 58 | if(/^http/i.test(_13["css"])){ 59 | var url=_13["css"]; 60 | }else{ 61 | var url=easyloader.base+"themes/"+easyloader.theme+"/"+_13["css"]; 62 | } 63 | _c(url,function(){ 64 | _15="loaded"; 65 | if(_14=="loaded"&&_15=="loaded"){ 66 | _16(); 67 | } 68 | }); 69 | } 70 | if(/^http/i.test(_13["js"])){ 71 | var url=_13["js"]; 72 | }else{ 73 | var url=easyloader.base+"plugins/"+_13["js"]; 74 | } 75 | _4(url,function(){ 76 | _14="loaded"; 77 | if(_14=="loaded"&&_15=="loaded"){ 78 | _16(); 79 | } 80 | }); 81 | function _16(){ 82 | _3[_11]="loaded"; 83 | easyloader.onProgress(_11); 84 | if(_12){ 85 | _12(); 86 | } 87 | }; 88 | }; 89 | function _17(_18,_19){ 90 | var mm=[]; 91 | var _1a=false; 92 | if(typeof _18=="string"){ 93 | add(_18); 94 | }else{ 95 | for(var i=0;i<_18.length;i++){ 96 | add(_18[i]); 97 | } 98 | } 99 | function add(_1b){ 100 | if(!_1[_1b]){ 101 | return; 102 | } 103 | var d=_1[_1b]["dependencies"]; 104 | if(d){ 105 | for(var i=0;i 4 | 5 | > WebPhotoshop精简版是利用HTML5技术在Web上实现对图形图像的处理，构建易维护、易共享、易于拓展、实时性的Web图形图像处理平台。 6 | > 精简版功能包括：图形绘制、图像处理、图像操作。完整版包括多人协作操作图像、实时交流、图片搜索，同时实现实时的多人协作处理图形图像技术。（完整版后续上传） 7 | ## WebPhotoshop绘制展示1 8 | ![WebPhotoshop绘制展示1](https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/master/Images/1.png) 9 | 10 | ## WebPhotoshop绘制展示2 11 | ![WebPhotoshop绘制展示2](https://raw.githubusercontent.com/leanfish2011/WebPhotoshop-Simple/master/Images/2.png) 12 | 13 | ## 一、功能说明： 14 | ### 1、图形绘制 15 | 1. 实现铅笔、画笔（书法画笔、喷枪、蜡笔、记号笔、水彩画笔）的绘制效果。 16 | 2. 实现直线、曲线、椭圆（圆）、矩形（圆角矩形）、三角形（直角三角形、等边三角形、任意三角形）、多边形的绘制。 17 | 3. 绘制过程中，可以选择颜色，选择颜色有两种方式：颜色选择、颜色拾取。可以进行颜色填充，即对选定区域，用选择的颜色进行填充。 18 | 19 | ### 2、图像处理 20 | 1. 能够实现的效果有：黑白、模糊、亮度/透明度、反色、雾化、锐化、浮雕、雕刻、柔化、油画、积木、怀旧、蒙版. 21 | 2. 蒙版包括：红色蒙版、蓝色蒙版、绿色蒙版。 22 | 23 | ### 3、图像操作 24 | 1. 能够对图像进行的操作有：图像选择，包括区域选择、对象选择。 25 | 2. 图像移动，即对选择区域或对象的移动。 26 | 3. 图像裁剪，包括矩形裁剪（保留裁剪区内、保留裁剪区外）。 27 | 4. 图像的旋转，即将画布或者选择的区域对象向右90度、向左90度、180度、垂直旋转、水平旋转、任意度数。 28 | 5. 橡皮擦效果，能够擦除绘制的图像。 29 | 6. 图像的缩小放大，包括图像的局部缩放和图像的整体缩放。 30 | 7. 插入文本，即在图像上插入文本，能够改变文本颜色、字体、大小，实现加粗、倾斜、下划线、删除线效果。 31 | 8. 将图像保存为图片。将图像存到服务器。将图像另存为其他格式。图像保存为下次可以再进行编辑的自定义格式。 32 | 33 | ### 4、其他 34 | 1. 可以实现操作无限制回退，和跳转到任何一次操作。 35 | 2. 可以实现添加图层、删除图层、移动图层。 36 | 37 | ### 5、完整版功能 38 | 1. 多人协同绘图。实现了多人同时在线编辑同一张图片，实时合并和展现对方的绘制。 39 | 2. 实时交流。支持多人群聊、一对一单聊，方便多人协同绘制中沟通。 40 | 41 | ## 二、操作流程： 42 | > 1) 进入系统后，显示主工作区，包括菜单栏、选项栏、工具箱、主画板、历史记录、图层管理。 43 | > 2) 默认为铅笔，可以在主工作区画图。可以选择颜色等属性。 44 | > 3) 打开图片，进行图片编辑。 45 | 46 | ## 三、TODO： 47 | >1. 代码需要优化，很多代码都只是功能的实现和累积，没有使用面向对象的思想。 48 | >2. 部分功能因前端局限性还未完全实现。 49 | -------------------------------------------------------------------------------- /docker/Dockerfile: -------------------------------------------------------------------------------- 1 | # 来源镜像 2 | FROM alpine:20200330_212034 3 | 4 | ENV TZ=Asia/Shanghai 5 | 6 | # 将vue生成后的静态文件拷贝到临时目录中 7 | ADD web /tmp/webphotoshop/web 8 | 9 | # 将之前的静态文件清理掉，再将临时目录中的静态文件移动到project目录中 10 | # 不能直接清理掉web目录，已经挂载了 11 | CMD rm -rf /opt/project/web/webphotoshop/index.html && rm -rf /opt/project/web/webphotoshop && mv /tmp/webphotoshop/web* /opt/project/web/webphotoshop 12 | -------------------------------------------------------------------------------- /docker/docker_build.sh: -------------------------------------------------------------------------------- 1 | # 1、将静态文件包拷贝到docker目录中 2 | # 2、构建镜像 3 | 4 | #!/bin/bash 5 | 6 | version="v2.0" 7 | 8 | function build_image() 9 | { 10 | work_path=$(pwd) 11 | echo "当前目录："$work_path 12 | 13 | cd ../ 14 | project_path=$(pwd) 15 | echo "当前项目目录："$project_path 16 | 17 | latest_commit_id=$(git rev-parse --short HEAD) 18 | branch=$(git symbolic-ref --short -q HEAD) 19 | 20 | rm -rf docker/web/* 21 | 22 | cp -rP ./Code docker/web/ 23 | cp -rP ./CSS docker/web/ 24 | cp -rP ./Images docker/web/ 25 | cp -rP ./JScript docker/web/ 26 | cp index.html docker/web/ 27 | 28 | cd docker 29 | time=$(date "+%Y%m%d_%H%M%S") 30 | tag=$version"_"$branch"_"$time"_"$latest_commit_id 31 | docker_name=$1":"$tag 32 | 33 | sudo docker build -t $docker_name . 34 | } 35 | 36 | # 根据各个项目修改 37 | project_name="webphotoshop-web" 38 | 39 | # 入口 40 | build_image $project_name 41 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 |  8 | 9 | 10 | 11 | 12 | WebPhotoshop 13 | 14 |
15 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 49 | 50 | 51 |
52 | 341 |
342 |
    343 |
  • 344 | 345 |
    • 346 |
  • 铅笔
    • 347 |
  •   |  选择框：
    • 352 |
    • 353 |
  •   |  渐变模式：
    • 360 |
  •   |  笔型：
    • 368 |
  •   |  笔头大小： 370 |
    • 371 |
  •   |  不透明度：
    • 373 |
  •   |  笔头样式：
    • 379 |
  •   |  模糊程度： 381 |
    • 382 |
  •   |  宽度： 384 |
    • 385 |
  •   |  字体：
    • 404 |
  •   |  字号：
    • 423 |
  •   |  加粗: 424 | 425 |
    • 426 |
  •   |  倾斜: 427 | 428 |
    • 429 |
  •   |  下划线: 430 | 431 |
    • 432 |
  •   |  删除线: 433 | 434 |
    • 435 |
  •   |  对齐：
    • 441 |
  •   |  是否填充: 442 | 443 |
    • 444 |
  •   |  是否圆角: 445 | 446 |
    • 447 |
  •   |  是否圆: 448 | 449 |
    • 450 |
  •   |  三角形：
    • 455 |
  •   |  是否为正多边形: 456 | 457 |
    • 458 |
  • 461 |
    • 462 |
  •   |  调节比例： 464 |
    • 465 |
  •   |  线条样式：
    • 472 |
  •   |  形状选择：
    • 479 |
480 |
481 |
482 |
483 |
484 |
485 |
486 | 你的浏览器不支持canvas! 487 | 488 | 489 |
490 |
491 |
492 |
494 | 495 |
496 |
498 | 499 |
500 | 取消 确定 503 |
504 |
505 |
506 |
507 |
508 |
509 | 新建 510 |
511 |
512 |
513 | 514 |
515 |
516 |
517 |
518 | 背景 519 |
520 |
521 |
522 | 523 |
524 |
525 |
526 |
527 |
528 |
529 |
530 | 铅笔：按下左键并拖动 531 |
532 |
533 | X:20,Y:40 534 |
535 |
536 |
537 |
538 |
539 |
540 |
560 | 561 | 562 | 564 | 567 | 568 | 569 | 571 | 574 | 575 | 576 | 578 | 581 | 582 |
名称: 563 | 565 | 566 |
高度: 570 | 572 |  像素 573 |
宽度: 577 | 579 |  像素 580 |
583 |
584 |
603 | 604 | 605 | 607 | 608 |
色阶调整 606 |
609 |
610 |
629 |
630 | 色相 631 |
632 | 641 |
642 |
643 |
644 | 饱和度 645 |
646 | 655 |
656 |
657 |
658 |
678 | 679 | 680 | 682 | 686 | 687 | 688 | 690 | 697 | 698 |
角度: 681 | 683 | 685 |
旋转方向: 689 | 691 | 696 |
699 |
700 |
719 |
720 | 亮度 721 |
722 | 734 |
735 |
736 |
737 | 对比度 738 |
739 | 751 |
752 |
753 |
754 |
774 | 775 | 776 | 777 | 779 | 780 | 781 | 782 | 784 | 785 |
名称： 778 | .png
保存位置： 783 |
786 |
787 |
807 | 808 | 809 | 810 | 824 | 825 | 826 | 827 | 829 | 830 | 831 |
名称： 811 | 812 | 813 | 823 |
保存位置： 828 |
832 |
833 |
839 |
840 |
841 | 843 |
844 |
845 |
846 |
847 |
848 |
849 |
850 |
851 | 852 |
853 |
854 | 接收人： 855 | 858 | 发送 860 |
861 |
862 |
863 |
864 |
865 | 866 | 867 | 868 | 869 | 870 | 871 | 872 | 873 | 874 | 875 | --------------------------------------------------------------------------------