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

最新推荐文章于 2026-04-26 07:48:34 发布

原创最新推荐文章于 2026-04-26 07:48:34 发布 · 3.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#web #图像处理 #gdi+ #服务器 #工具

1.ASP.Net学习体会专栏收录该内容

13 篇文章

订阅专栏

本文介绍了基于.Net 2.0开发的Web图像编辑平台XPaint，它实现了基本图形编辑、图像处理、特效文字等功能。通过无刷新回调技术和GDI+，XPaint提供了丰富的图像编辑选项，支持网络图像填充，具有较好的用户体验和可扩展性。

在 ” 基于 Web 的图像编辑实现方案（上） ” 一文我详细地解释了结合 .Net 实现 Web 图像编辑的方案，下面来介绍我按照此思路开发完成的 Web 图像编辑平台： Web XPaint V1.0 （以下简称 XPaint ），目前已经开发完毕正在试用阶段，试用网站： http://www.crossgo.com ，希望有兴趣的朋友来体验一下全新的 Web 图像编辑！

XPaint 基于 .Net 2.0 开发，采用的技术涉及前台的脚本绘制图形技术、后台无刷新回调技术、 GDI+ 、 .Net 反射机制等，基本实现了预期的效果，用户前台操作简单，与服务器交互响应速度快，并且充分利用了 GDI+ 的强大功能。 XPaint 目前实现的功能包括： 1 ）各种基本形状的编辑； 2 ）外部图像的处理（加载 / 填充等） 3 ）特效文字的处理 4 ）图像的编辑（复制 / 粘贴 / 保存等） 5 ）图像特效滤镜处理 6 ）图库管理（支持 Web 图库）。不同版本的具体功能列表如下：

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

从功能列表上可以发现， XPaint 已经具备了图像处理系统需要的绝大多数功能，并且由于是 Web 应用系统，因此比一般的图像处理软件更能提供一些更具特色的功能，下面结合具体操作来简单说明下如何采用 XPaint 编辑图像。

首先输入网站地址并加载 XPaint 主界面，界面组织结构比较简洁、清晰，分为工具栏区、操作面板区、画布区三大块。用户所有的前台操作均发生在画布区，其他区的功能是将用户操作信息提交到后台的，在提交之前用户可以任意修改前台操作。

用户前台操作时候会发现有一个矩形区域，这是用来设置在当前图像的指定区域进行某种操作，用户可以按住鼠标左键任意移动 / 拖动该区域，改变其大小或位置，注意的是如果是向左上角拖拉后释放鼠标左键则自动提交到后台，向右下角拖拉则不自动提交，可以手工点工具栏“选择” - 〉“确定”按钮进行提交。用户可以右击鼠标显示 / 掩藏该区域，该区域宽度为 0 或者不可见时候则默认为对整幅图像操作。我相信用户只要试几次基本就知道如何操作了！

图像编辑前可以设置好图像的大小、背景、背景图像、边框等参数，下面以用户需要绘制一个任意形状区域说明如何编辑：

1）设置图像基本参数，包括前景颜色（画笔颜色）、线宽度（画笔宽度）、背景颜色等

2）工具栏“选择”，选区形状的下拉框选择“闭合曲线”

3）在画布上由一个小矩形框，用鼠标拖拉 / 移动，改变其大小或位置，这个区域就是任意形状区域将要显示的“父”区域

4）在矩形区域内双击鼠标开始绘制曲线，再次双击则结束绘制。需要补充的是只有对于多边形 / 曲线绘制是双击控制开始 / 结束，一般的矩形 / 园形等绘制则直接限制为该矩形为其外切矩形，有点复杂吧 ~

5）结束绘制后点工具栏“选择” - 〉“确定”按钮提交即可，这样一个任意形状的区域则画出来了

6）如果绘制不满意可以通过 ” 操作面板区 ”->” 历史记录 ” 进行撤销

下面我们将用网络的图片来填充一个任意区域，例如就用百度的 logo 图片，首先还是选择形状为“闭合曲线”，并画好任意区域，再选择工具栏“图像” - 〉输入 http://www.baid u.com/img/logo.gif ，然后直接点“填充”即完成，感觉怎么样？很简单吧！（具体操作界面如下图所示）

从刚才的操作可以看出，目前 XPaint 已经具备了大部分图像处理功能，那么与上文提到的几种实现方式比较 XPaint 有哪些特点呢？还有哪些需要改进的呢？ XPaint 的特点我概括为这样几个方面：

（1）完全的瘦客户端，客户只要安装浏览器（目前主要在 IE 上测试）就可使用；

（2）前后台操作分开，在提交到后台前前台可以任意操作

（3）界面无刷新，增强了用户体验度，不需要漫长的等待 ~

（4）可开放式结构，用户可以加载网络图像，可以自定义字体类型，可以自定义第三方特效滤镜，可以远程共享图像，支持任意步骤撤销 / 恢复，基于 Web 的图库管理等

（5）功能强大，提供了丰富的图像设置参数，支持多种形状绘制（包括 3D 效果的立方体、圆柱体等），预装多种特效字体，支持多种图像格式

（6）用户操作接口统一，所有的操作均是基于所设置的区域来完成

系统的结构已经基本成熟，但是 XPaint 还是一个处于测试阶段的平台，在有些地方还需要改进，例如坐标的准确性、一些特效滤镜的处理效果、历史记录的管理等方面还要再完善，，我想再结合试用的反馈逐渐完善，最终一定能实现一个比较出色的 Web 图像编辑平台！欢迎大家试用后将意见反馈给我， QQ ： 12198613 ， MSN ： komatu@hotmail.com ！