asp.net+flash实现在线涂鸦保存图片
用flash与asp.net制作网络涂鸦板
作者：陈粤雄 2008年5月，来源:http://blog.csdn.net/areshh/article/details/4176904
效果图如下
用过csdn博客的人应该知道csdn里有个画图的功能，可以在线直接画图，然后插入到博客的文章里。类似功能的还有大名鼎鼎的猫扑，你可以在 猫扑的猫爪涂写里画图，然后直接在网页上发布。这就是本文要说的网络涂鸦功能。网络涂鸦简单来说就是在客户端由用户自由绘制图形，然后把提交的数据交由服 务器端发布。
通常的客户端是用flash来实现，服务器端通常用asp.net来实现（我试过用asp来实现，但图形处理功能太差，更主要的是速度很慢，几乎无法接受），从客户端提交信息主要有两种：
一是当作图形来提交，也可以说是当矢量格式来提交，比如说在客户端从点(12,25)到点(12,200)画了一条宽为2的线，可以向服务器提 交 "12 25 12 200 2"，然后在服务器端再进行重绘，然后生成一个图像文件并保存，这种方法的优点是当客户端信息比较少时，上传的速度比较快，如果只是少数传固定的图形的话 这样绘图快很多，缺点是服务器端处理的息信比较多，负担比较重。
二是当作一个图像来提交，就是说在客户端直接生成图像，然后传回到服务器端。这种做法在好处是服务器端处理的信息比较少，缺点是传输的信息量比较大。
我做的这个网络涂鸦板不包含图形，是由留言者自由涂画的，所以采用第二种方法来做。
以下是大致的过程。
第一步，建立一个ByteArray数组，用来保存画的图像的数据，由于这里只用到216色，一个像素只用一个byte数据保存，所以大小与要画的图一样即可，如果希望颜色多点，可以改变这里的大小，或者建立一个二维数组，代码如下：
var picWidth:int=500;//绘图区宽度 var picHeight:int=300;//绘图区高 var bitmap:ByteArray=new ByteArray();//记录当前绘图 for(i=0;i<picHeight*picWidth;i++) bitmap.[i]=255;
因为只用到216色，一个像素用一个byte的数据保存，所以要有一个颜色索引表，这个索引表可以自己随意定义，只要在服务器端再用同一个索引 表映射回来就可以了。为了方便，以及以后可以正确的保存为gif格式图像，可以直接用标准的256色图像默认色盘，这个色盘的值可以自己写，更好的方式是 用asp.net里的“Bitmap.Palette.Entries”数组获得，不过因为在flash里也要用到，所以要把这个数组的值写出来。
255是白色，所以要先把 bitmap 里的所有值置为255。
另外要注意的是标准的256色图像默认色盘前面的40个值是在后面有重复的，所以这40个值可以不用。
第二步，画图像。画图像的思路是：鼠标移动时，用Object.graphics.moveTo(from.x,from.y)和 Object.graphics.lineTo(to.x,to.y)在客户端界面画出图像，然后把ByteArray数组里对应的值设为当前颜色值（详 见第三步），如果要想改变画笔大小，则可以把鼠标当前点坐标周围的点也绘一次。
function DrawLine(toDrawMovie:MovieClip,from:Point ,to:Point)
{
toDrawMovie.graphics.lineStyle(penPix*2+1,colorsArray[penColor],1,true);
toDrawMovie.graphics.moveTo(from.x,from.y);
toDrawMovie.graphics.lineTo(to.x,to.y);
setLineBitmap(from,to,penColor,penPix);
}
第三步，把图像画入这个ByteArray里，要注意的是在图像文件(标准bmp格式文件)里的Y轴跟flash里的Y轴是反的(所以picHeight-y1-1)
//画入像素
function setPixBitmap(xx:int,yy:int,pix:int,color:int)
{
var k,x1,y1;
for(k=0;k<pixs[pix].length/2;k++)
{
x1=pixs[pix][k*2]+xx;
y1=pixs[pix][k*2+1]+yy;
if(x1>=0 &&y1>=0 &&x1<picWidth && y1<picHeight)
bitmap[(picHeight-y1-1)*picHeight+x1]=color;
}
}
第四步，把画好后的ByteArray里的数据传送到服务器端。数据传数很简单，用URLRequest对像即可以，要注意method要用post。（另外本人一直觉得这种方法好像有些不妥，但又说不出是哪里有问题，望高手指点下）
function buttonSaveClickHandler(event:MouseEvent):void
{
var sender:URLRequest = new URLRequest(toSaveUrl);
sender.data = bitmap;
sender.method="post";
navigateToURL(sender,"_blank");
}
第五步，服务器端的处理。至此，客户端的工作完成了，剩下的是服务器端的工作了。服务器端里用asp也可实现，但处理一幅图片就可能使服务器卡个半天，所以还是用asp.net来做的好。
服务器端处理的思路是，先定义一个Stream，所后把图像文件头写进这个Stream里，然后把由客户端得到的数据映射到索引表所得到的数据逐个写进这个Stream里，再通过这个Stream生成一个Bitmap对像，即生成所得图像。
传送到服务器端后，需要把数还原，因为在flash里是保存在一维数组里的，所以首先要还原为二维数组，代码大致如下：
int PicWidth = 500;
int PicHeight = 300;
int requestByteLen = PicHeight * PicWidth ;
byte[,] buf = new byte[PicHeight, PicWidth];
byte[] requestByte = new byte[requestByteLen];
requestByte = Request.BinaryRead(requestByteLen);
for (int j = 0; j < PicHeight; j++)
for (int i = 0; i < PicWidth; i++)
buf[j, i] = (byte)(requestByte[j * PicWidth + i]);
然后还要把一个Byte的数据还原为3个Byte的数据(24位颜色)，再把这个数组放进一个Stream里面，接着通过这个Stream生成一个Bitmap对像，最后通过Bitmap.Save()就可以保存图像了。
代码大致如下：
Stream toWrite = new MemoryStream();//保存图像数据的内存流
byte[] HeadInfo = this.getImageHeadInfo();
toWrite.Write(HeadInfo, 0, HeadInfo.Length);//把头信息写入内存流中
//把图像数据写入流中
for (int j = 0; j < PicHeight; j++)
for (int i = 0; i < PicWidth; i++)
{
toWrite.WriteByte((byte)(colorPanel[buf[j, i] * 3 + 2]));
toWrite.WriteByte((byte)(colorPanel[buf[j, i] * 3 + 1]));
toWrite.WriteByte((byte)(colorPanel[buf[j, i] * 3]));
}
Bitmap outImg = new Bitmap(toWrite);
outImg.Save(fileName, imgFormat);
bmp.Save()有几个重载，可以选择保存为硬盘上的文件，也可以选择保存在一个Byte[]里，然后通过Response.BinaryWrite(Byte[ ])就可以直接在网页上显示了。