使用 ASP.NET 在 Web 上进行图像注释/标记

• 下载源文件 - 56.4 Kb

引言

一张图片胜过千言万语。当填写某些描述情况的 Web 表单时，尤其如此，图像可以有效地说明主要文本。例如，保险表单填写（汽车、房屋）或诊断（机械、患者）、情况评估（事故、交通、地图）等，都希望在现有的在线 Web 表单中添加简单的图像注释功能。在本文中，我将向您展示一种使用 ASP.NET 在 Web 表单上注释图像的简单有效的方法。

工作原理

为了解决这个问题，我们将它分为两个需求

1. 使表单上的图像能够接收 (x, y) 坐标作为注释的位置；
2. 使服务器端代码能够在原始图像上绘制适当的叠加层，并将其呈现给浏览器。

现在听起来是不是简单多了？

对于 (1)，我们不需要嵌入任何客户端 ActiveX 组件等来记录从鼠标点击产生的简单 (x, y) 坐标。<asp:ImageButton> 就足够了。它支持一个 onClick(object sender, ImageClickEventArgs e) 事件。e 事件参数对象的属性是

• e.x (integer) - 点击发生处的 X 坐标。
• e.y (integer) - 点击发生处的 Y 坐标。

或者更简单，在我们创建了表单中的服务器端 ImageButton 之后

<asp:ImageButton id="MarkupImage" runat="server" 
      ImageUrl="Markup.aspx?desc="></asp:ImageButton>

调用接下来的两行代码将检索所需的 (x, y) 坐标信息。

    string x=Request.Params["MarkupImage.x"];
    string y=Request.Params["MarkupImage.y"];

现在是 (2)。如果用户选择了一种注释类型（例如，矩形）并提供了相关参数（例如，宽度和高度），他/她将单击图像一次以添加注释。在从鼠标点击获取 (x, y) 信息后，我们将更新 ImageButton 的 ImageUrl 属性，并使其指向另一个 aspx 文件 Markup.aspx，该文件负责呈现带有任何叠加层或注释的原始图像，这些注释在鼠标点击位置指定。为了简单起见，所有标记/注释信息，包括位置、类型和适用的参数，都编码为一个 URL 参数 desc，每个注释对象用分号分隔。例如，它可以是

ImageUrl="Markup.aspx?desc=136,187,0,8,8;267," + 
         "254,1,3;138,282,2,TEXT;269,336,3,left.ico;";
//Format: "x,y,type,argument...;"
//Type  : 0 - rectangle, 1 - circle, 2 - text, 3 - server side image

它由四个标记组成。第一个是“136,187,0,8,8;”，这是一个在 (136,187) 处 8x8 的矩形。第二个是“267,254,1,3;”，这是一个半径为 3 的圆，位于 (267,254)。第三个“138,282,2,TEXT;”表示在 (138,282) 处的“TEXT”字符串，而最后一个“269,336,3,left.ico;”将图像 'left.ico' 绘制到 (269,336) 处；文件 left.ico 在服务器上。

设置 ImageURL 将导致浏览器中呈现的 HTML <input type="image"> 的 src 属性指向 Markup.aspx，并请求该页面。呈现图像非常简单，因为我们可以通过 GDI+ 托管类接口（一组 Win32 GDI+ API 的包装器）加载和操作图像。

private void Page_Load(object sender, System.EventArgs e)
{
     string desc = HttpUtility.HtmlDecode(Request.Params["desc"]);
     if (desc == null)
     {
          desc = string.Empty;
     }
     MarkupImage("LocalMap.jpg", desc);
}


private void MarkupImage(string image, string desc)

{
    Bitmap bitmap = new Bitmap(Server.MapPath(image));
    MemoryStream memStream = new MemoryStream();
    Graphics g = Graphics.FromImage(bitmap);

    // ... Draw various annotations. omitted for clarity

    // Set the content type
    Response.Clear();
    Response.ContentType="image/jpeg";
    
    // Send the bitmap to the output stream
    bitmap.Save(memStream, ImageFormat.Jpeg);
    memStream.WriteTo(Response.OutputStream);

    // Cleanup
    g.Dispose();
    bitmap.Dispose();
}

简单，不是吗？

每个注释类型（如矩形、圆形、文本、图像等）的绘图都使用标准的 GDI+ 函数，因此这里不再详细讨论，请参考源代码。当然，您可以轻松支持许多其他类型。

关注点

在本文中，我们探讨了一种在 ASP.NET Web 表单中执行简单图像注释的机制。它通过从 ImageButton 控件读取鼠标点击的位置信息，并将其 ImageUrl 属性分配给另一个 ASP.NET 页面来实现，该页面将注释信息编码到 URL 参数中。第二个页面随后将在服务器端使用 GDI+ 进行呈现，并将其输出到浏览器，使用 ContentType="image/jpeg"。此功能在某些情况下可能很有用，以补充纯文本 Web 来说明那些胜过千言万语的细节。

历史

• 2004 年 9 月至 10 月，初稿。