15.1 图形图像基础
使用图形图像可以进行良好的页面布局，在现有的很多Web应用中，其应用程序的页面布局经常需要使用图像，这样能够让页面整体效果更加友好。用户会对界面友好的应用程序印象深刻从而会进行回访。ASP.NET不仅能够进行图形图像显示，还能够使用GDI+进行图形图像的绘制。
15.1.1 图像布局
在页面布局中，很多设计人员喜欢使用CSS设计，这样能够简化页面代码，将页面布局代码和页面代码相分离，从而提高了维护性。虽然随着技术的发展，越来越多的动态生成页面布局，以及动态生成图像的方法也越来越多的被开发人员和设计人员所认知，但是开发人员和设计人员还是比较喜欢使用CSS和IMG标签进行页面布局，这是因为CSS和IMG标签都比较简单，可以说是“轻量级”的，即不需要页面进行逻辑处理也不需要动态生成。
1．IMG标签
IMG标签是图像标签，IMG标签属于HTML控件，在Web应用中可以看到在页面中包含大量的IMG标签用于图形图像显示，示例代码如下所示。
上述代码显式了一个名为autom的JPG图像到页面中。
使用IMG标签能够轻松的为网页添加图片，IMG标签包括以下常用属性：
１）Src：图片的地址，可以是图片的相对地址也可以是绝对地址。
２）Width：设定图片的宽度。
３）Height：设定图片的高度。
４）Alt：当图片显示不了时提示的字符。
５）Border：图片的边框的宽度。
６）Align：图片的周片文字的对齐方式。
７）Title：当鼠标放在图片上出现的提示字符。
开发人员能够通过编写Width和Height属性进行图像的大小控制，也可以编写Alt属性当图片显示不了时进行提示。
2．CSS
通过CSS能够使用图像进行页面布局和样式控制。当需要使背景呈现渐变效果时，无需使用JavaScript进行控制，可以直接使用CSS和图像进行搭配使用即可。CSS背景属性包括：
１）背景颜色属性（background-color）：该属性为HTML元素设定背景颜色。
２）背景图片属性（background-image）：该属性为HTML元素设定背景图片。
３）背景重复属性（background-repeat）：该属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既x轴重复，又y轴重复。
４）背景附着属性（background-attachment）：该属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。
５）背景位置属性（background-position）：该属性和background-image属性连在一起使用，决定了背景图片的最初位置。
６）背景属性（background）：该属性是设置背景相关属性的一种快捷的综合写法。
为了方便进行页面背景布局，可以使用CSS背景属性，示例代码如下所示。
上述代码将BODY标签样式编写为背景颜色为#6094d7、背景图片编写为bg.jpg并且背景图片按照x轴重复。在body标签下方包含一个DIV标签，该标签作为主样式进行内容编写。
3．JavaScript进行图像编程
HTML图像控件支持JavaScript进行图像操作，可以为图像控件进行事件处理，JavaScript代码如下所示。
上述代码获取图片ID为pic1的图片属性，当触发该事件后，ID为pic1的图片的宽度和高度将变为100。为了让图片被单击时触发该事件，则应该在IMG标签中声明该事件，图片相应的代码如下所示。
上述代码定义了事件onclick并定义了图片id为pic1。
使用IMG标签进行图形图像编程是非常简单的方法。IMG标签和CSS配合能够进行页面布局，IMG标签和JavaScript进行配合能够进行图形图像的处理，所以IMG标签是非常容易被学习和使用的。在Web应用开发中，大量的IMG被使用也说明IMG标签是一种高效率、门槛低的图形图像编程方法。
15.1.2 GDI+简介
虽然通过IMG标签和CSS、JavaScript相配合能够进行图形图像开发，但是其功能有限，并不能够进行高级的图形图像开发。高级的图形图像开发有点类似与Photoshop中图形处理，在ASP.NET中，可以使用强大的GDI+进行图形图像开发，实现类似Photoshop中图形处理的功能。
GDI+是Windows XP中的一个子系统，它主要负责在显示屏幕和打印设备输出有关信息，它是一组通过C++类实现的应用程序编程接口。GDI+的前身是GDI，在C++应用程序开发中，C++开发人员经常需要使用GDI进行窗口的绘制与重绘，在Vista操作系统之后的操作系统中，微软对图形图像编程进行了更新，在Vista等系统中，大量的使用了半透明、渐变、边缘模糊化等效果，这就要求在编程中强化图形图像渲染，如图15-7所示。
图15-7 Vista特效
为了适应更高的用户要求和用户体验的要求，微软对GDI进行了升级，就成为GDI+。GDI+不仅能够在C++开发当中使用，也能够在.NET中使用GDI+强大的绘图效果。GDI+相比与GDI，进行了一些加强，这些加强功能如下所示。
１）渐变的画刷（Gradient Brushes）：GDI+允许开发人员使用渐变的画刷来绘制线条、图形以及外观。
２）基数样条函数（Cardinal Splines）：GDI+支持基数样条函数而GDI不支持，基数样条能够防止锯齿的出现，使得窗口以及图形的绘制能够平滑过渡。
３）持久路径对象（Persistent Path Objects）：在GDI中，绘制路径在窗口更改需要通过重绘来保持图形的持久化，而在GDI+中，可以通过创建对个对象来持久化。
４）变形和矩阵对象（Transformations ＆ Matrix Object）：GDI+提供了强大的矩阵对象，开发人员可以通过矩阵对象进行图形的翻转、平移和缩放。
５）可伸缩区域（Scalable Regions）：GDI+允许在一定的范围内进行任何图形变换。
GDI+不仅包括这些新特性，还包括混合以及等多种图像类型支持等特性。ASP.NET相对于ASP的强大之处就在于ASP.NET可以使用GDI+进行图形图像编程，实现不同的Web应用功能。
15.1.3 绘制线条示例
通过GDI+能够在Web应用中绘制线条，如果需要使用GDI+，则首先需要引用命名空间System.Drawing，示例代码如下所示。
使用了命名空间后，就能够使用System.Drawing中的方法进行线条绘制，示例代码如下所示。
上述代码绘制了使用GDI+的Graphice类的对象进行线条的绘制，当页面被载入时则会开始绘制线条。当线条开始绘制时，首先需要创建一个Bitmap对象，Bitmap对象处理由像素定义的图像对象，示例代码如下所示。
上述代码创建了一个Bitmap对象并定义该对象区域为400*400，Bitmap就像画布。Graphice对象能够在该区域内绘制图形图像，示例代码如下所示。
定义了Graphice对象后就需要创建Pen对象进行绘制，Pen对象就像画笔，能够在画布上绘制图形，示例代码如下所示。
上述代码定义了画笔的颜色和宽度，定义画笔后就需要清除整个绘图面并进行背景颜色填充，示例代码如下所示。
填充背景后，就能够使用Graphice的DrawLine方法进行线条绘制，示例代码如下所示。
上述代码则会在“画布”上绘制线条，运行后如图15-8所示。
图15-8 绘制线条
通过使用GDI+的Graphice类能够在页面中绘制图形，Graphice类还能够处理图片，实现锐化、底片等效果，Graphice类将在后面的章节详细讲到。
15.1.4 .NET Framework绘图类
GDI+包括很多的类，结构和枚举用于为开发人员提供快速进行图形图像开发提供保障和指导。
1．命名空间
GDI+包括很多的类、结构和枚举用于为开发人员提供图形编程，这些类、结构和枚举都定义在命名空间中，这些命名控件如下所示。
１）System.Drawing：提供对GDI+基本图形图像功能的访问，Graphice包含在此命名空间中。
２）System.Drawing.Drawing2D：提供高级的二维和矢量图形功能。
３）System.Drawing.Imaging：提供高级的图像处理功能。
４）System.Drawing.Text：提供高级的文字处理及排版功能。
５）System.Drawing.Printing：提供图形打印所需要的类。
６）System.Drawing.Design：提供开发UI设计时所需要的类。
这些命名空间为开发人员提供了图形图像编程的基本保障，其中最常用的是System.Drawing，该命名空间提供了Graphice类进行图形图像处理。System.Drawing.Drawing2D提供了高级的二维图形和矢量图形的处理功能，使用System.Drawing.Drawing2D能够进行二维图形和二维游戏的开发和编写。
System.Drawing.Imaging命名空间主要提供了图像处理的功能，例如将图像进行锐化处理，或者将图像变成黑白色或底片都可以通过使用System.Drawing.Imaging命名空间的方法。System.Drawing.Text命名空间提供了文字处理能力，通过System.Drawing.Text类能够实现Word中艺术字的效果。
2．类和方法
在.NET Framework中，包括诸多的命名空间以保证开发人员能够快速的进行图形图像开发，在这些命名空间中，最常用的是System.Drawing命名空间，该命名空间提供的类如下所示。
１）Bitmap：在Bitmap上使用图形工具，并在其中存储图形图像的绘图面板。
２）Graphics：提供直线、曲线、多边形等绘画方法，也提供对一些位图的处理，例如平移、缩放等。
３）Pen：提供直线、曲线等功能需要的画笔属性。
４）Brush：提供文本填充和图形绘画，可以填充图形如圆形、椭圆形和多边形。
５）Color：提供颜色的枚举，用于定义Pen和Brush的颜色。
６）Font：提供文本的字体属性，定义文本的字体类型、样式和大小等。
７）Point：用于定义有序的坐标对，这些坐标能够定义二维平面上的点。
８）Size：定义区域的大小。
９）Image：用于支持位图、指针和图标等文件类型。
１0）Rectangle：用于定义矩形区域。
１１）StringFormat：用于定义文本在位图上的对齐方式等属性。
简而言之，Bitmap就相当于绘画时需要的纸，图形能够绘画到纸上面。而Graphice相当于绘画的人，因为人能够提供只写、曲线、多边形等绘画方法，而Pen和Brush相当于绘画工具，如铅笔、笔刷等，Color就相当于是绘画所需要的颜料。
在绘画过程中，首先需要使用一张纸，固定到绘画板上，然后有一个人能够进行绘画，这个人能够进行素描、水彩等绘画。但是在绘画前，需要给这个人基本的工具，包括铅笔、笔刷和颜料盘等。在这些基本物质准备完毕后，就能够开始绘制了。GDI+的绘制过程与之非常的相似，首先需要定义一个画布，并通过构造函数定义画布的大小，示例代码如下所示。
上诉代码定义了一个大小为500*500的画布，定义了画布之后，就需要有一个人进行绘画操作，示例代码如下所示。
上述代码定义了一个Graphics对象并指定该对象在MyImage画布上进行绘画，定义了Graphics对象后，需要给该对象指定工具，示例代码如下所示。
上述代码为对象指定了一个绿色的宽度为10的画笔，指定画笔后，这个“人”就能够进行绘画了。示例代码如下所示。
通过DrawLine方法进行直线的绘画，绘画完毕需要执行Save方法把图片保存到文件中，或者使用Response.OutputStream将图片输出到HTTP流中在客户端浏览器中呈现。
15.1.1 图像布局
在页面布局中，很多设计人员喜欢使用CSS设计，这样能够简化页面代码，将页面布局代码和页面代码相分离，从而提高了维护性。虽然随着技术的发展，越来越多的动态生成页面布局，以及动态生成图像的方法也越来越多的被开发人员和设计人员所认知，但是开发人员和设计人员还是比较喜欢使用CSS和IMG标签进行页面布局，这是因为CSS和IMG标签都比较简单，可以说是“轻量级”的，即不需要页面进行逻辑处理也不需要动态生成。
1．IMG标签
IMG标签是图像标签，IMG标签属于HTML控件，在Web应用中可以看到在页面中包含大量的IMG标签用于图形图像显示，示例代码如下所示。
+展开
-HTML
<body>
<img src="autom.jpg" />
</body>
<img src="autom.jpg" />
</body>
上述代码显式了一个名为autom的JPG图像到页面中。
使用IMG标签能够轻松的为网页添加图片，IMG标签包括以下常用属性：
１）Src：图片的地址，可以是图片的相对地址也可以是绝对地址。
２）Width：设定图片的宽度。
３）Height：设定图片的高度。
４）Alt：当图片显示不了时提示的字符。
５）Border：图片的边框的宽度。
６）Align：图片的周片文字的对齐方式。
７）Title：当鼠标放在图片上出现的提示字符。
开发人员能够通过编写Width和Height属性进行图像的大小控制，也可以编写Alt属性当图片显示不了时进行提示。
2．CSS
通过CSS能够使用图像进行页面布局和样式控制。当需要使背景呈现渐变效果时，无需使用JavaScript进行控制，可以直接使用CSS和图像进行搭配使用即可。CSS背景属性包括：
１）背景颜色属性（background-color）：该属性为HTML元素设定背景颜色。
２）背景图片属性（background-image）：该属性为HTML元素设定背景图片。
３）背景重复属性（background-repeat）：该属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既x轴重复，又y轴重复。
４）背景附着属性（background-attachment）：该属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。
５）背景位置属性（background-position）：该属性和background-image属性连在一起使用，决定了背景图片的最初位置。
６）背景属性（background）：该属性是设置背景相关属性的一种快捷的综合写法。
为了方便进行页面背景布局，可以使用CSS背景属性，示例代码如下所示。
+展开
-HTML
<body style="background:#6094d7 url('bg.jpg') repeat-x;">
<div style="width:800px; border:1px solid #333333; margin:0px auto; background:white">
编写内容
</div>
</body>
<div style="width:800px; border:1px solid #333333; margin:0px auto; background:white">
编写内容
</div>
</body>
上述代码将BODY标签样式编写为背景颜色为#6094d7、背景图片编写为bg.jpg并且背景图片按照x轴重复。在body标签下方包含一个DIV标签，该标签作为主样式进行内容编写。
3．JavaScript进行图像编程
HTML图像控件支持JavaScript进行图像操作，可以为图像控件进行事件处理，JavaScript代码如下所示。
+展开
-HTML
<script type="text/javascript">
function cut()
{
var pic=document.getElementById("pic1") //获取ID为pic1的图片的属性
pic.width=100; //设置图片的宽度
pic.height=100; //设置图片的高度
}
</script>
function cut()
{
var pic=document.getElementById("pic1") //获取ID为pic1的图片的属性
pic.width=100; //设置图片的宽度
pic.height=100; //设置图片的高度
}
</script>
上述代码获取图片ID为pic1的图片属性，当触发该事件后，ID为pic1的图片的宽度和高度将变为100。为了让图片被单击时触发该事件，则应该在IMG标签中声明该事件，图片相应的代码如下所示。
+展开
-HTML
<img alt="" height="323" src="autom.jpg" width="500" onclick="cut()" id="pic1"/>
上述代码定义了事件onclick并定义了图片id为pic1。
使用IMG标签进行图形图像编程是非常简单的方法。IMG标签和CSS配合能够进行页面布局，IMG标签和JavaScript进行配合能够进行图形图像的处理，所以IMG标签是非常容易被学习和使用的。在Web应用开发中，大量的IMG被使用也说明IMG标签是一种高效率、门槛低的图形图像编程方法。
15.1.2 GDI+简介
虽然通过IMG标签和CSS、JavaScript相配合能够进行图形图像开发，但是其功能有限，并不能够进行高级的图形图像开发。高级的图形图像开发有点类似与Photoshop中图形处理，在ASP.NET中，可以使用强大的GDI+进行图形图像开发，实现类似Photoshop中图形处理的功能。
GDI+是Windows XP中的一个子系统，它主要负责在显示屏幕和打印设备输出有关信息，它是一组通过C++类实现的应用程序编程接口。GDI+的前身是GDI，在C++应用程序开发中，C++开发人员经常需要使用GDI进行窗口的绘制与重绘，在Vista操作系统之后的操作系统中，微软对图形图像编程进行了更新，在Vista等系统中，大量的使用了半透明、渐变、边缘模糊化等效果，这就要求在编程中强化图形图像渲染，如图15-7所示。
图15-7 Vista特效
为了适应更高的用户要求和用户体验的要求，微软对GDI进行了升级，就成为GDI+。GDI+不仅能够在C++开发当中使用，也能够在.NET中使用GDI+强大的绘图效果。GDI+相比与GDI，进行了一些加强，这些加强功能如下所示。
１）渐变的画刷（Gradient Brushes）：GDI+允许开发人员使用渐变的画刷来绘制线条、图形以及外观。
２）基数样条函数（Cardinal Splines）：GDI+支持基数样条函数而GDI不支持，基数样条能够防止锯齿的出现，使得窗口以及图形的绘制能够平滑过渡。
３）持久路径对象（Persistent Path Objects）：在GDI中，绘制路径在窗口更改需要通过重绘来保持图形的持久化，而在GDI+中，可以通过创建对个对象来持久化。
４）变形和矩阵对象（Transformations ＆ Matrix Object）：GDI+提供了强大的矩阵对象，开发人员可以通过矩阵对象进行图形的翻转、平移和缩放。
５）可伸缩区域（Scalable Regions）：GDI+允许在一定的范围内进行任何图形变换。
GDI+不仅包括这些新特性，还包括混合以及等多种图像类型支持等特性。ASP.NET相对于ASP的强大之处就在于ASP.NET可以使用GDI+进行图形图像编程，实现不同的Web应用功能。
15.1.3 绘制线条示例
通过GDI+能够在Web应用中绘制线条，如果需要使用GDI+，则首先需要引用命名空间System.Drawing，示例代码如下所示。
+展开
-C#
using System.Drawing;//使用绘图命名空间
使用了命名空间后，就能够使用System.Drawing中的方法进行线条绘制，示例代码如下所示。
+展开
-C#
protected void Page_Load(object sender, EventArgs e)
{
Bitmap MyImage = new Bitmap(400, 400);//创建Bitmap对象
Graphics gr = Graphics.FromImage(MyImage);//创建绘图对象
Pen pen = new Pen(Color.Green, 10);//创建画笔对象
gr.Clear(Color.WhiteSmoke); //格式化画布
gr.DrawLine(pen, 50, 200, 400,20);//绘制直线
MyImage.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Jpeg);//输出
MyImage.Dispose();//释放对象
gr.Dispose();
}
{
Bitmap MyImage = new Bitmap(400, 400);//创建Bitmap对象
Graphics gr = Graphics.FromImage(MyImage);//创建绘图对象
Pen pen = new Pen(Color.Green, 10);//创建画笔对象
gr.Clear(Color.WhiteSmoke); //格式化画布
gr.DrawLine(pen, 50, 200, 400,20);//绘制直线
MyImage.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Jpeg);//输出
MyImage.Dispose();//释放对象
gr.Dispose();
}
上述代码绘制了使用GDI+的Graphice类的对象进行线条的绘制，当页面被载入时则会开始绘制线条。当线条开始绘制时，首先需要创建一个Bitmap对象，Bitmap对象处理由像素定义的图像对象，示例代码如下所示。
+展开
-C#
Bitmap MyImage = new Bitmap(400, 400);//创建Bitmap对象
上述代码创建了一个Bitmap对象并定义该对象区域为400*400，Bitmap就像画布。Graphice对象能够在该区域内绘制图形图像，示例代码如下所示。
+展开
-C#
Graphics gr = Graphics.FromImage(MyImage); //创建绘图对象
定义了Graphice对象后就需要创建Pen对象进行绘制，Pen对象就像画笔，能够在画布上绘制图形，示例代码如下所示。
+展开
-C#
Pen pen = new Pen(Color.Green, 10); //创建画笔对象
上述代码定义了画笔的颜色和宽度，定义画笔后就需要清除整个绘图面并进行背景颜色填充，示例代码如下所示。
+展开
-C#
gr.Clear(Color.WhiteSmoke);//格式化画布
填充背景后，就能够使用Graphice的DrawLine方法进行线条绘制，示例代码如下所示。
+展开
-C#
gr.DrawLine(pen, 50, 200, 400,20); //绘制直线
上述代码则会在“画布”上绘制线条，运行后如图15-8所示。
图15-8 绘制线条
通过使用GDI+的Graphice类能够在页面中绘制图形，Graphice类还能够处理图片，实现锐化、底片等效果，Graphice类将在后面的章节详细讲到。
15.1.4 .NET Framework绘图类
GDI+包括很多的类，结构和枚举用于为开发人员提供快速进行图形图像开发提供保障和指导。
1．命名空间
GDI+包括很多的类、结构和枚举用于为开发人员提供图形编程，这些类、结构和枚举都定义在命名空间中，这些命名控件如下所示。
１）System.Drawing：提供对GDI+基本图形图像功能的访问，Graphice包含在此命名空间中。
２）System.Drawing.Drawing2D：提供高级的二维和矢量图形功能。
３）System.Drawing.Imaging：提供高级的图像处理功能。
４）System.Drawing.Text：提供高级的文字处理及排版功能。
５）System.Drawing.Printing：提供图形打印所需要的类。
６）System.Drawing.Design：提供开发UI设计时所需要的类。
这些命名空间为开发人员提供了图形图像编程的基本保障，其中最常用的是System.Drawing，该命名空间提供了Graphice类进行图形图像处理。System.Drawing.Drawing2D提供了高级的二维图形和矢量图形的处理功能，使用System.Drawing.Drawing2D能够进行二维图形和二维游戏的开发和编写。
System.Drawing.Imaging命名空间主要提供了图像处理的功能，例如将图像进行锐化处理，或者将图像变成黑白色或底片都可以通过使用System.Drawing.Imaging命名空间的方法。System.Drawing.Text命名空间提供了文字处理能力，通过System.Drawing.Text类能够实现Word中艺术字的效果。
2．类和方法
在.NET Framework中，包括诸多的命名空间以保证开发人员能够快速的进行图形图像开发，在这些命名空间中，最常用的是System.Drawing命名空间，该命名空间提供的类如下所示。
１）Bitmap：在Bitmap上使用图形工具，并在其中存储图形图像的绘图面板。
２）Graphics：提供直线、曲线、多边形等绘画方法，也提供对一些位图的处理，例如平移、缩放等。
３）Pen：提供直线、曲线等功能需要的画笔属性。
４）Brush：提供文本填充和图形绘画，可以填充图形如圆形、椭圆形和多边形。
５）Color：提供颜色的枚举，用于定义Pen和Brush的颜色。
６）Font：提供文本的字体属性，定义文本的字体类型、样式和大小等。
７）Point：用于定义有序的坐标对，这些坐标能够定义二维平面上的点。
８）Size：定义区域的大小。
９）Image：用于支持位图、指针和图标等文件类型。
１0）Rectangle：用于定义矩形区域。
１１）StringFormat：用于定义文本在位图上的对齐方式等属性。
简而言之，Bitmap就相当于绘画时需要的纸，图形能够绘画到纸上面。而Graphice相当于绘画的人，因为人能够提供只写、曲线、多边形等绘画方法，而Pen和Brush相当于绘画工具，如铅笔、笔刷等，Color就相当于是绘画所需要的颜料。
在绘画过程中，首先需要使用一张纸，固定到绘画板上，然后有一个人能够进行绘画，这个人能够进行素描、水彩等绘画。但是在绘画前，需要给这个人基本的工具，包括铅笔、笔刷和颜料盘等。在这些基本物质准备完毕后，就能够开始绘制了。GDI+的绘制过程与之非常的相似，首先需要定义一个画布，并通过构造函数定义画布的大小，示例代码如下所示。
+展开
-C#
Bitmap MyImage = new Bitmap(500, 500);//创建Bitmap对象
上诉代码定义了一个大小为500*500的画布，定义了画布之后，就需要有一个人进行绘画操作，示例代码如下所示。
+展开
-C#
Graphics gr = Graphics.FromImage(MyImage);//创建Graphics对象
上述代码定义了一个Graphics对象并指定该对象在MyImage画布上进行绘画，定义了Graphics对象后，需要给该对象指定工具，示例代码如下所示。
+展开
-C#
Pen pen = new Pen(Color.Green, 10);//创建画笔
上述代码为对象指定了一个绿色的宽度为10的画笔，指定画笔后，这个“人”就能够进行绘画了。示例代码如下所示。
+展开
-C#
gr.DrawLine(pen, 50, 200, 400,20);//绘制直线
MyImage.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Jpeg);//输出
MyImage.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Jpeg);//输出
通过DrawLine方法进行直线的绘画，绘画完毕需要执行Save方法把图片保存到文件中，或者使用Response.OutputStream将图片输出到HTTP流中在客户端浏览器中呈现。
加支付宝好友偷能量挖...
