基于Web的图像编辑实现方案（中）

在” 基于Web的图像编辑实现方案（上）”一文我详细地解释了结合.Net实现Web图像编辑的方案，下面来介绍我按照此思路开发完成的Web图像编辑平台： Web XPaint V1.0（以下简称XPaint），目前已经开发完毕正在试用阶段，试用网站：http://www.crossgo.com，希望有兴趣的朋友来体验一下全新的Web图像编辑！
[align=left]XPaint基于.Net 2.0开发，采用的技术涉及前台的脚本绘制图形技术、后台无刷新回调技术、GDI+、.Net反射机制等，基本实现了预期的效果，用户前台操作简单，与服务器交互响应速度快，并且充分利用了GDI+的强大功能。XPaint目前实现的功能包括：1）各种基本形状的编辑；2）外部图像的处理（加载/填充等）3）特效文字的处理4）图像的编辑（复制/粘贴/保存等）5）图像特效滤镜处理6）图库管理（支持Web图库）。不同版本的具体功能列表如下：[/align]

[align=left]No.[/align]	[align=left]功能[/align]	[align=left]详细描述[/align]	[align=center]标准版[/align]	[align=center]高级版[/align]	[align=center]精简版[/align]
[align=center]基本功能[/align]
[align=left]1[/align]	[align=left]设置视图背景[/align]	[align=left]设置整个界面的背景图片，可以使web图片[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]2[/align]	[align=left]打开背景音乐[/align]	[align=left]是否开启系统的背景音乐[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]3[/align]	[align=left]设置视图大小[/align]	[align=left]设置整个界面的宽度/高度[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]4[/align]	[align=left]设置画布大小[/align]	[align=left]设置整个画布的宽度/高度[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]5[/align]	[align=left]设置画布比例[/align]	[align=left]可以放大/缩小画布的比例[/align]	[align=center]×[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]6[/align]	[align=left]设置图像大小[/align]	[align=left]设置图像的宽度/高度[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]7[/align]	[align=left]设置图像背景[/align]	[align=left]设置所绘制图像的背景图像[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]8[/align]	[align=left]设置图像边框[/align]	[align=left]设置图像边框的图像，可以实现相框效果[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]9[/align]	[align=left]设置图像背景颜色[/align]	[align=left]设置图像背景颜色，图像背景图像优先[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]10[/align]	[align=left]设置图像前景颜色[/align]	[align=left]绘制时画笔的前景颜色[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]11[/align]	[align=left]设置图像前景纹理[/align]	[align=left]设置绘制时画笔的纹理，优先于前景颜色[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]12[/align]	[align=left]保存属性设置[/align]	[align=left]保存上次设置属性信息到客户端[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=center]选区操作[/align]
[align=left]1[/align]	[align=left]选择基本形状[/align]	[align=left]先选择基本形状，拖拉鼠标可以设置选区，曲线及多边形则是双击开始/结束，单击开始画下一个线，所有操作都是基于选区来操作，如果选区宽度为0或者不可见则选区默认为整个图像[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]2[/align]	[align=left]设置选区透明度[/align]	[align=left]越大则选区越明显，防止操作时影响选择[/align]	[align=center]×[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]3[/align]	[align=left]选区是否可见[/align]	[align=left]可以显示/掩藏选区，鼠标右键也一样[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]4[/align]	[align=left]清除选区内容[/align]	[align=left]例如清除在选区内绘制的点[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]5[/align]	[align=left]设置选区填充颜色[/align]	[align=left]支持任意形状的颜色填充[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]6[/align]	[align=left]设置画笔宽度[/align]	[align=left]越宽则越粗[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]7[/align]	[align=left]设置画笔端点类型[/align]	[align=left]例如可以划出带箭头的曲线[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]8[/align]	[align=left]设置画笔样式[/align]	[align=left]例如点画线，虚线等，同时还支持纹理样式[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]9[/align]	[align=left]绘制基本图形[/align]	[align=left]设置好选区及画笔等属性确定或者松开左键[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]10[/align]	[align=left]设置形状高级属性[/align]	[align=left]对于曲线/圆等形状可设置，例如可以画弧线[/align]	[align=center]×[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=center]外部图像[/align]
[align=left]1[/align]	[align=left]加载外部图像[/align]	[align=left]支持本地/WEB图像加载到指定选区，可以选择不同加载比例[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]2[/align]	[align=left]填充外部图像[/align]	[align=left]支持本地/WEB图像填充到指定选区，可以选择不同加载比例[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]3[/align]	[align=left]混合外部图像[/align]	[align=left]支持本地/WEB图像混合到指定选区，可选择不同加载比例、混合模式，例Alpha混合[/align]	[align=center]×[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]4[/align]	[align=left]浏览图库图像[/align]	[align=left]查看上传/Web图像的图库，支持加密访问[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]5[/align]	[align=left]加载图库图像[/align]	[align=left]双击可以加载到指定选区，支持任意选区[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]6[/align]	[align=left]管理图库图像[/align]	[align=left]编辑图库列表的文本文件，需要管理员操作[/align]	[align=center]×[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=center]字体处理[/align]
[align=left]1[/align]	[align=left]设置字体大小[/align]	[align=left] [/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]2[/align]	[align=left]设置字体最大行宽[/align]	[align=left]如果输入字体宽度超过该宽度则自动换行[/align]	[align=center]×[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]3[/align]	[align=left]设置字体类型[/align]	[align=left]设置字体的名称[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]4[/align]	[align=left]上传自定义字体[/align]	[align=left]支持客户端特殊字体，需要上传字体文件[/align]	[align=center]×[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]5[/align]	[align=left]设置字体特效类型[/align]	[align=left]各种特效字体[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]6[/align]	[align=left]设置字体特效参数[/align]	[align=left]特效参数[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=center]编辑/特效[/align]
[align=left]1[/align]	[align=left]复制指定区域[/align]	[align=left]支持任意区域（可以用曲线划出）[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]2[/align]	[align=left]剪切指定区域[/align]	[align=left] [/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]3[/align]	[align=left]粘贴[/align]	[align=left]粘贴所复制/剪切的图像到指定矩形区域[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]4[/align]	[align=left]填充[/align]	[align=left]所复制/剪切的图像填充到指定矩形区域[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]5[/align]	[align=left]清除[/align]	[align=left]删除指定区域，用背景颜色代替[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]6[/align]	[align=left]保存图像到本地[/align]	[align=left]保存指定格式图像到本地[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]7[/align]	[align=left]保存图像到服务器[/align]	[align=left]保存指定格式图像到服务器，可以加密保存[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]8[/align]	[align=left]历史记录查看[/align]	[align=left]可以查看到图像处理的历史记录[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]9[/align]	[align=left]历史记录撤销/重复[/align]	[align=left]（跨步）撤销/重复到历史记录的任意一步[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]10[/align]	[align=left]图像特效处理[/align]	[align=left]对指定选区应用选择滤镜[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]
[align=left]11[/align]	[align=left]转换图像格式[/align]	[align=left]转换为指定格式[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]12[/align]	[align=left]察看自定义滤镜[/align]	[align=left]可以查看所外部加载的第三方滤镜实现代码[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]13[/align]	[align=left]校验自定义滤镜[/align]	[align=left]可以校验所外部加载的第三方滤镜实现代码[/align]	[align=center]×[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]14[/align]	[align=left]执行自定义滤镜[/align]	[align=left]可以执行所外部加载的第三方滤镜实现代码[/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=left]15[/align]	[align=left]保存自定义滤镜[/align]	[align=left]保存自定义的第三方滤镜实现代码到服务器[/align]	[align=center]×[/align]	[align=center]√[/align]	[align=center]×[/align]
[align=center]在线帮助[/align]
[align=left]1[/align]	[align=left]提供帮助信息[/align]	[align=left] [/align]	[align=center]√[/align]	[align=center]√[/align]	[align=center]√[/align]

[align=left]从功能列表上可以发现，XPaint已经具备了图像处理系统需要的绝大多数功能，并且由于是Web应用系统，因此比一般的图像处理软件更能提供一些更具特色的功能，下面结合具体操作来简单说明下如何采用XPaint编辑图像。[/align]
[align=left]首先输入网站地址并加载XPaint主界面，界面组织结构比较简洁、清晰，分为工具栏区、操作面板区、画布区三大块。用户所有的前台操作均发生在画布区，其他区的功能是将用户操作信息提交到后台的，在提交之前用户可以任意修改前台操作。[/align]
[align=left]用户前台操作时候会发现有一个矩形区域，这是用来设置在当前图像的指定区域进行某种操作，用户可以按住鼠标左键任意移动/拖动该区域，改变其大小或位置，注意的是如果是向左上角拖拉后释放鼠标左键则自动提交到后台，向右下角拖拉则不自动提交，可以手工点工具栏“选择”-〉“确定”按钮进行提交。用户可以右击鼠标显示/掩藏该区域，该区域宽度为0或者不可见时候则默认为对整幅图像操作。我相信用户只要试几次基本就知道如何操作了！[/align]
[align=left]图像编辑前可以设置好图像的大小、背景、背景图像、边框等参数，下面以用户需要绘制一个任意形状区域说明如何编辑：[/align]
[align=left]1） 设置图像基本参数，包括前景颜色（画笔颜色）、线宽度（画笔宽度）、背景颜色等[/align]
[align=left]2） 工具栏“选择”，选区形状的下拉框选择“闭合曲线”[/align]
[align=left]3） 在画布上由一个小矩形框，用鼠标拖拉/移动，改变其大小或位置，这个区域就是任意形状区域将要显示的“父”区域[/align]
[align=left]4） 在矩形区域内双击鼠标开始绘制曲线，再次双击则结束绘制。需要补充的是只有对于多边形/曲线绘制是双击控制开始/结束，一般的矩形/园形等绘制则直接限制为该矩形为其外切矩形，有点复杂吧~[/align]
[align=left]5） 结束绘制后点工具栏“选择”-〉“确定”按钮提交即可，这样一个任意形状的区域则画出来了[/align]
[align=left]6） 如果绘制不满意可以通过”操作面板区”->”历史记录”进行撤销[/align]
[align=left]下面我们将用网络的图片来填充一个任意区域，例如就用百度的logo图片，首先还是选择形状为“闭合曲线”，并画好任意区域，再选择工具栏“图像”-〉输入http://www.baid u.com/img/logo.gif，然后直接点“填充”即完成，感觉怎么样？很简单吧！（具体操作界面如下图所示）[/align]







[align=left]从刚才的操作可以看出，目前XPaint已经具备了大部分图像处理功能，那么与上文提到的几种实现方式比较XPaint有哪些特点呢？还有哪些需要改进的呢？XPaint的特点我概括为这样几个方面：[/align]
[align=left]（1） 完全的瘦客户端，客户只要安装浏览器（目前主要在IE上测试）就可使用；[/align]
[align=left]（2） 前后台操作分开，在提交到后台前前台可以任意操作[/align]
[align=left]（3） 界面无刷新，增强了用户体验度，不需要漫长的等待~[/align]
[align=left]（4） 可开放式结构，用户可以加载网络图像，可以自定义字体类型，可以自定义第三方特效滤镜，可以远程共享图像，支持任意步骤撤销/恢复，基于Web的图库管理等[/align]
[align=left]（5） 功能强大，提供了丰富的图像设置参数，支持多种形状绘制（包括3D效果的立方体、圆柱体等），预装多种特效字体，支持多种图像格式[/align]
[align=left]（6） 用户操作接口统一，所有的操作均是基于所设置的区域来完成[/align]
[align=left]系统的结构已经基本成熟，但是XPaint还是一个处于测试阶段的平台，在有些地方还需要改进，例如坐标的准确性、一些特效滤镜的处理效果、历史记录的管理等方面还要再完善，，我想再结合试用的反馈逐渐完善，最终一定能实现一个比较出色的Web图像编辑平台！欢迎大家试用后将意见反馈给我，QQ：12198613，MSN：komatu@hotmail.com！[/align]