在 ASP.NET Core 7 中将 map 区域添加到 MemorySteam Image

Question

使用 Visual Studio 2022 - 我有以下视图：

<img src='@Url.Action("GenerateImage","Position", new imageID = (int)TempData.Peek("image")})' alt="A Landscape Image" style="width:95%;height=75%" usemap"#TestMap" />
<map name="TestMap">
    <area shape="rect" coords="100,100,1000,1000" style="cursor: pointer" alt="A Closeup Image" target="_blank" href='@Url.Action("ZoomIn", "Position")' />
</map>

在 position controller 中， GenerateImage(int imageID)提取一个通用的 jpg，在其上添加一些图像，然后将其写出到 memory stream：

using (var memStream = new MemoryStream())
{
    OverviewMap.Save(memStream, ImageFormat.Jpeg);
    result = this.File(memStream.GetBuffer(), "image/jpeg");  
}

return result;

但是，显示的图像没有活动的 map 区域。 我认为这是因为图像来自 memory stream 而不是物理图像。

我想要做的是使我添加到基本图像之上的图像可点击，这将打开一个新选项卡，以便我可以提供更深入的信息。

我的第一个想法是在加载的图像上使用图像 map。 我还考虑过在第一个图像的顶部添加一个透明图像并映射到透明图像，或者只添加一个鼠标单击事件。

我相信有办法做到以上所有的事情。 如果可能的话，我的偏好可能是使用鼠标事件，因为我可以稍后在项目中使用它。

Answer 1

鉴于

显示的图像没有活动 map 区域。

您正在提供源图像并且它正在显示。 本期的 scope 和图像 map 不存在——也不是多事的——位于 html 控件标记中。

在您提供的标记片段中， usemap"#TestMap"无效——用户代理/浏览器可能无法解释（或更正）它。

试试看， usemap="#TestMap"