使用C1BinaryImage for ASP.NET Wijmo 您可以轻松地将数据库或是流中的位图显示到应用中，方便地完成从数据库中导出并显示位图的工作。您可以在任何数据绑定控件中使用它(例如Repeater, DataList, GridView等控件) ，便捷地把数据源中提取出的位图完整地展示出来。

在本教程中你将学到：

1. 使用C1BinaryImage显示图片

2. 进行图片设置

3. 在DataList 控件中用C1BinaryImage 显示图片

4. 使用定制的 HttpHandler 显示图片

跟以往一样，我们第一步要创建一个web 应用。

教程1: 使用C1BinaryImage显示图片

你可以通过以下步骤实现用C1BinaryImage显示本地路径下的图片：

1. 在工具箱中选定C1BinaryImage 控件，将其拖动到Web 窗体中。

2. 通过C1BinaryImage的智能标签打开任务菜单。

3. 点击ImageUrl属性旁的按钮，调出选择图片的对话框。

4. 在对话框中选定要导入的图片并点击确定。

5. 运行工程，这是你将看到图片以原始大小显示出来。

step2of3Output

同时，你也可以通过直接设置C1BinaryImage. 的 ImageUrl 属性指定图片路径来完成这项工作，相应效果及代码如下：

<cc1:C1BinaryImage ID="C1BinaryImage1" runat="server" ImageUrl="http://www.componentone.com/newimages/Products/Visuals/se_theming.png"/>

教程 2 : 进行图片设置

C1BinaryImage 为我们提供了以下图片设置选项：

1. ResizeMode - 改变图片大小，C1BinaryImage 控件支持改变图片大小并支持裁剪、调整到适宜尺寸以及填充等不同效果，在操作同时保持图片质量如一。在此给出一个例子，下面是原始图片：

通过在标签中设置Height-高度， Width-宽度和ReziseMode-尺寸模式来指定对应的位图控件进行相应操作。

<cc1:C1BinaryImage ID="C1BinaryImage1" runat="server" ImageUrl="~/Koala.png" Height="100px" ResizeMode="Fit" Width="100px" />

有三种改变尺寸的操作模式可供选择：

1).Fit: 调整到适宜尺寸，在保持原图片宽高比的前提下将图片调整到新的高度及宽度。

2).Fill: 填充，直接将图片根据给定宽度和高度要求进行拉伸。

3).Crop:裁剪，选定指定高度和宽度内的图片区域作为新的图片进行显示。

2. ImageAlign - 图片相对位置设定，对控件相对于页面其他元素的位置进行设置。可用的设置方式有如下几种：http://helpcentral.componentone.com/nethelp/c1binaryimagewijmo/ImageAlign.htm.

3. Tooltip - 提示工具，用于将提示内容加入到控件中，当你的鼠标悬停在对应图片上时该内容会自动显示，设置提示只需以下两步操作:

1. 选定BinaryImage 控件并点击智能标签打开控件对应的任务列表。

2. 填入ToolTip-提示工具 对应的文本。

4. SavedImageName - 改变默认文件名。该属性将对用户点击保存图片时弹出的保存对话框内的默认文件名进行设置。

<cc1:C1BinaryImage ID="C1BinaryImage1" runat="server" ImageUrl="~/C1.png" <strong>SavedImageName</strong>="ComponentOne" />

教程 3 – 在DataList 控件中用C1BinaryImage 显示图片

1. 将DataList 控件加入窗体中。

2. 将DataList 控件绑定��一个含有图片的数据表里，具体方法参看此处：here。.

3. 打开DataList 的智能菜单并选中 ‘Edit Templates’ 选项对模板进行编辑。

4. 向其中加入C1BinaryImage 控件(原文中的Delete the不解其意，未翻)。

5. 打开智能菜单并点击 ‘End Template Editing’ 模板编辑。

6. 切换到代码视图并在C1BinaryImage 的对应代码中加入ImageData= ‘<%# Eval(“Picture”) %>’ 语句。

7. 运行应用你将看到如下效果：

教程 4 – 使用定制的 HttpHandler 显示图片

C1BinaryImage 支持开发者使用 customhttphandler 来控制经渲染的图片。你可以对所有图片进行定制化处理。
采用以下步骤可以向使用C1BinaryImage 渲染的图片中加入水印

1. 创建一个CustomBinaryImageHandler 类，继承于C1BinaryImageHandler。

2. 重载类的ProcessImageData 方法来改变图片尺寸。

public class CustomBinaryImageHandler : C1BinaryImageHandler

    public override C1BinaryImageData ProcessImageData(C1BinaryImageData imageData)

        using (var outStream = new System.IO.MemoryStream())

        using (var inStream = new System.IO.MemoryStream(imageData.Data))

        using (var image = Bitmap.FromStream(inStream))

            var newImage = AddWatermark(image);

            newImage.Save(outStream, ImageFormat.Png);

            imageData.Data = outStream.ToArray();

            imageData.MimeType = "image/png";

            imageData.ImageFileName += "_Watermark";

        return base.ProcessImageData(imageData);

    private Image AddWatermark(Image image)

        var watermarkString = "ComponentOne";

        var font = new Font("Arial", 8F, FontStyle.Regular);

        var newImage = new Bitmap(image.Width, image.Height);

        using (var g = Graphics.FromImage(newImage))

            g.DrawImage(image, new Point(0, 0));

            g.DrawString(watermarkString, font, new SolidBrush(Color.White), new PointF(2, newImage.Height - font.Height - 2));

        return newImage;

3. 保存该文件，并命名为 CustomBinaryImageHandler.ashx。

4. 将C1BinaryImage 加入到网页上同时设置其HttpHandlerUrl 属性为“CustomBinaryImageHandler.ashx”。

5. 运行工程样例，C1BinaryImage 将给图片添加如下水印效果：

handler

要参看 C1BinaryImage 的有关样例，请点击此处： ControlExplorer

获取更多有关Studio for ASP.NET Wijmo的信息，马上访问葡萄城控件官网，免费下载试用版吧。

ComponentOne Enterprise | 下载试用

ComponentOne 是一套专注于企业 .NET开发、支持 .NET Core 平台，并完美集成于 Visual Studio 的第三方控件集，包含 300 多种 .NET开发控件，提供表格数据管理、数据可视化、报表和文档、日程安排、输入和编辑、导航和布局、系统提升工具等七大功能，被誉为“.NET开发的‘瑞士军刀’”。

ComponentOne 为您提供专业的产品咨询服务，并由技术支持工程师为您1对1解答。>> 发帖提问