在ASP.NET Core 7中为MemoryStream生成的图片添加可点击区域

场景说明 #

用Visual Studio 2022开发，视图里通过@Url.Action调用控制器的GenerateImage方法，返回内存流生成的叠加图片，原本尝试用图像映射实现点击区域，但因为图片来自内存流导致映射失效。需求是让图片上的叠加区域可点击，点击后在新标签页打开详情内容，优先用鼠标点击事件方案方便后续复用。

当前视图代码：

<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>

控制器GenerateImage方法核心逻辑：

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

return result;

解决方案 #

1. 替换图像映射为鼠标点击事件监听

在视图中给图片添加容器，通过JavaScript监听点击位置，判断是否在目标区域内触发跳转。这种方案不受图片来源限制，复用性更强：

<div style="position: relative; display: inline-block;">
    <img id="dynamicImage" 
         src='@Url.Action("GenerateImage","Position", new {imageID = (int)TempData.Peek("image")})' 
         alt="A Landscape Image" 
         style="width:95%; height: auto;" />
</div>

<script>
    // 监听图片点击事件
    document.getElementById('dynamicImage').addEventListener('click', function(e) {
        const img = e.target;
        const imgRect = img.getBoundingClientRect();
        
        // 计算点击坐标相对于图片原始尺寸的比例（解决页面缩放/图片样式缩放的影响）
        const scaleX = img.naturalWidth / imgRect.width;
        const scaleY = img.naturalHeight / imgRect.height;
        
        // 转换为图片原始尺寸下的点击坐标
        const clickX = (e.clientX - imgRect.left) * scaleX;
        const clickY = (e.clientY - imgRect.top) * scaleY;
        
        // 定义目标点击区域的原始坐标（和之前map的coords一致）
        const clickArea = { left: 100, top: 100, right: 1000, bottom: 1000 };
        
        // 判断是否点击在目标区域内
        if (clickX >= clickArea.left && clickX <= clickArea.right && clickY >= clickArea.top && clickY <= clickArea.bottom) {
            // 打开详情页面，新标签页
            window.open('@Url.Action("ZoomIn", "Position")', '_blank');
        }
    });
</script>

2. 优化控制器图片返回逻辑（可选）

原代码中memStream.GetBuffer()可能包含多余空字节，导致图片加载异常，建议改用ToArray()并重置流位置：

using (var memStream = new MemoryStream())
{
    OverviewMap.Save(memStream, ImageFormat.Jpeg);
    memStream.Position = 0; // 重置流指针到起始位置
    result = this.File(memStream.ToArray(), "image/jpeg");  
}

return result;

方案优势 #

• 完全脱离图像映射的限制，不管图片是内存流还是物理文件都能正常工作
• 点击逻辑通过JS封装后，后续可以轻松添加多个点击区域，复用性高
• 无需依赖浏览器对图像映射的兼容性支持

内容的提问来源于stack exchange，提问作者Robert Frame