基于Web的图像编辑实现⽅案（上）
基于Web的图像编辑实现⽅案（上）
Web应⽤是飞速发展的⽹络时代的主⾓，软件的Web化不仅仅是使得可移动性变得更强，更重要的是增加了⽤户之间更深⼊的协作和交互的可能性。应⽤的操作可以发⽣在本机或⽹络上。在Web上⽬前实现的应⽤很多，特别是Google推出的Web软件产品⽐较引⼈注⽬，甚⾄Adobe⾸席执⾏官布鲁斯在3⽉份就宣称要推出可托管的在线PhotoShop版本！
那么如何在Web实现⽐较流畅的图像编辑，实现的⽅案有很多，但是基本可以分为两⼤类：插件⽅式、⾮插件⽅式。插件⽅式实现的⽅法⽐较常见，例如采⽤Flash插件或Java Applet或其它⾃⾏开发的图形处理插件等，甚⾄包括微软⽬前正在⼤⼒推⼴可以与Flash挑战的新兴技术SilverLight技术。⽬前⽐较成熟的是Flash⽅式，也有很多的涂鸦⽹站正在使⽤该技术，⽽⼏乎可以和PhotoShop相提并论的fauxto、fototool等更是登峰造极之作。⾮插件的⽅式⽬前还⽐较少，有些是纯粹基于客户端静态脚本来实现的，所编辑的图像只是⼀种伪图像，例如可能是很多点的集合，⽐较⾼级的发展到⽤动态语⾔来实现，例如
⽤ASP、PHP等，这种技术⽬前也⽐较成熟（例如基于GD或ImageMagick等），国内也有类似的⽹站实现了ASP版的图像在线处理。那么在发展到.Net时代后有没有更好的解决⽅案呢？下⾯我们先来⽐较下上⾯提到的⼏种⽅案。
功能插件静态⾮插件动态⾮插件（⽆.Net）
需要下载/安装插件需要不需要不需要
⽀持多种图像格式不⽅便不⽀持可以⽀持
⽀持⽂字输⼊/特效字体不⽅便可以⽀持可以⽀持
⽀持图像特效滤镜处理不⽅便可以⽀持可以⽀持
数据库、⽹络等外部图像加载不⽅便不⽀持不⽅便
图像处理历史记录保存/回放很好不⽀持不⽀持回放
客户端操作体验度（需要刷新等）很好好低，需要刷新
能⽣成真实图像可以⽀持不⽀持可以
运⾏性能（响应速度）⽐较好好⼀般
从上⾯的⼏个⽅⾯⽐较可以看出这⼏种⽅式各有千秋，采⽤插件⽅式需要客户端安装了该插件才能使
⽤，虽然插件的功能可以做的很强，⽤户⽤起来也会⽐较流畅，但是⽤户不⼀定会安装，因此这种⽅式⽐较适⽤于⽤户⽐较少的场合。静态脚本⽅式由于只是实现了伪图像的编辑，因此不能称为真正的图像编辑，例如⽤JavaScript输出了⼀些点状“图像”，如果⽤户全选⽹页（Ctrl+A），往往机器会⽴刻死机，因此只能⽤于要求不⾼、⽀持作为临时画图的场合。从操作⽅便性、功能健壮性、程序可移植性等⾓度考虑，采⽤动态语⾔开发图像处理是⽐较好的选择。这种⽅式可以⽐较⽅便的⽣成⼀幅真正的图像，⽽且还⽀持图像的各种处理效果，但是由于需要不断地和服务器发⽣⼤量数据交互，因此⽤户响应速度很慢，国⼈开发的IEPhotoShop⽹站使⽤时更是证明了这⼀点。那什么样的⽅案能平衡这些优缺点，⼜能满⾜Web图像编辑的需求？现在我们还不清楚Adobe会采⽤什么样的⽅式来实现可托管的PhotoShop，但是DotNet的时代给图像处理带来了新的契机，尤其是.Net 2.0/3.0的不断发展，废话说了⼀堆，下⾯我将向⼤家介绍我实现Web图像编辑的⽅案及实施⽅法。
我的实现⽅案具体可⽤下⾯⼏个关键字来概括：
1．静态脚本(Static Script)
结合脚本技术，例如JavaScript/VBScript等，可以实现在前台⽤户的图像绘制，虽然这时候绘制的图像还不是真正的图像，但是可以将绘制的点的坐标集记录下来。
2．⽆刷新回调(CallBack)
如何将这些点传给服务器？如果采⽤普通的提交⽅式，会和服务器交互⼤量⽆⽤的信息，例如图像数据等，其实关键是只需要得到绘制点集。DotNet 2.0中实现的ICallBackHandle接⼝使之成为可能。当然也可以⽤Ajax来传输数据，考虑到稳定性等，个⼈建议可以基于该接⼝开发⾃⼰的回调。
3．GDI Plus(GDI+)
服务器端收到这些信息后，可以对图像进⾏处理了。那么怎么处理呢？GDI+则可以实现您想要的任何效果。这⾥有⼈要发问了，基于GDI+的图像处理性能会不会很差？我只能说GDI+完全不等于GDI，如果保持好的编程习惯、结合⼀些GDI+优化⽅法（例如双缓存等），如果不是3D类应⽤，我想对于Web的图像处理应该⾜⾜够了！
4．反射机制(Reflector)
反射机制在.Net应⽤中的地位很特殊，如果⽤得好，可以实现⼀些意想不到的效果。例如您可以很容易的实现第三⽅滤镜效果。！
到这⾥，不知道您是否理解了我的实现⽅案，如果您已经明⽩我的想法，也许您现在就可以实现这样的Web图像处理模型！如果还是不太清楚的话，那只能继续忍受更多的废话了~。现在我们结合下⾯的图形及⼀些实现代码来把这个⽅案更详细得描绘⼀下。
⼏个关键的代码⽰例：
通过JavaScript实现前台绘制图像的点集，并记录到全局的数组。代码如下：
<script.>
var XPoints=new Array();
var YPoints=new Array();
//在坐标（x,y）点绘制⼀个虚拟的点
function doMakPoint(x,y)
{
//具体实现⽅法很多，例如输出⼀个像素⼤⼩的div
}
//例如绘制曲线，⿏标移动时⽣成点并记录点集
/
/对于绘制不同形状增加的点数不同，绘制矩形则只要记录两个对⾓点位置
//其他还要实现点集数组的清空等操作
function doMouseMove()
{
doMakPoint(event.x,event.y);
XPoints[XPoints.length]=x;
YPoints [YPoints.length]=y;
}
</script>
主要是实现⽆刷新回调，实现的⽅法⽐较简单，只要IE版本在5.5以上，均可以通过实现ICallbackEventHandler接⼝来完成回调，具体实现您可以从⽹上到更为详尽的资料，基本代码如下：
[后台CS代码部分]
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
//定义前台回调代码
string ReceiveScript = @"
function ReceiveServerData(arg){
doReceiveDta(arg);
}";
ClientScript.RegisterClientScriptBlock(this.GetType(),
"ReceiveServerData", ReceiveScript, true);
string CallbackScript = @"
function CallTheServer(arg) {
if(arg!='')" +
ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", null) + @";
}";
ClientScript.RegisterClientScriptBlock(this.GetType(),
"CallTheServer", CallbackScript, true);
}
}
// 接收客户端消息
public void RaiseCallbackEvent(string eventArgument)
{
returnValue = doImgProcess(Server.UrlDecode(eventArgument));
}
// 返回客户端
public string GetCallbackResult(){return returnValue;}
public string doImgProcess(string argStr)
{
String strRtn=””;
String[] tmpStrAry = argStr.Split('@');
System.Drawing.Bitmap b = new Bitmap(100, 200);;
if(tmpStrAry[0]==”R”)//绘制矩形
{
//处理代码可以单独封装起来
mousemove是什么键b=Paint.DrawRect(b);
//可以⽤Session等记录下当前图像，可⽤于更新前台Img的来源
Session[“curImg”]=b;
strRtn=”OK”;
}
return strRtn;
}
[前台回调代码]
<script>
function btnClick()
{
var xs=_Xpoints.join(",");
var ys=_Ypoints.join(",");
//例如绘制矩形
var strArg=”R”+”@”+xs+”@”+ys；分隔符为@
CallTheServer(escape(strArg));
}
function doReceiveDta(strRtn){alert(strRtn);}
</script>
是⼀系列的图像处理模块，这⾥可以充分利⽤.Net的强⼤功能，例如反射、Web Service等均可以，只要能返回⼀个图像实例就可以了。例如上
⾯DrawRect的实现：
public static class Paint
{
public static BitmapDrawRect(Bitmap b,String[]tmpStrAry)
{
using (Graphics g = Graphics.FromImage(b))
{
//从tmpStrAry解析绘制位置信息
g.DrawRectangle(curPen, new Rectangle(…);
}
}
}
通过上⾯的解释我相信您应该明⽩了我的做法，这种⽅案和前⾯提到的⼏种实现⽅式⽐较最⼤的特点是：1）IE不需要安装任何插件2）⽤户操作犹如发⽣在本地3）可以实现更多图像的加⼯处理，具体的⼀些⽐较我将在后⾯再讨论。细⼼的读者会发现在Ajax的资料中有⼀个类似的例⼦，但是如果按照说明安装使⽤就会发现根本⽆法实际的绘制图形，响应速度也很慢，根本原因我估计和前台绘制的⽅法有关，因此我的这个⽅案中，前台的绘制信息处理时⼀个很关键的部分，⽹上有很多采⽤Javascript绘制点、线、图形的例⼦，但是要和后台绘制图形报纸精确，还是需要仔细斟酌的，例如：如果画⼀条直线，前台只要两个点的位置给后台，但是如果画笔宽度很宽，就会对位置由⼀定影响。当然上⾯只是实现⽅案的简单概括，能够实现⼀个⽤户能够使⽤的Web图像编辑器还需要做更多的⼯作！同时如果您对我的⽅案有更好的建议，希望能和我联系，我的联系⽅式是QQ：12198613,MSN：，！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。