如何在.NET MVC中为图片添加多个热点并将数据保存至数据库

1. 数据模型设计 #

首先定义数据实体，适配EF等ORM框架映射到数据库：

• 商品图片实体，存储基础图片信息

public class ProductImage
{
    public int Id { get; set; }
    public string ImageUrl { get; set; }
    public int RelatedProductId { get; set; }
    // 存储原图宽高，用于坐标换算避免缩放偏移
    public int OriginalWidth { get; set; }
    public int OriginalHeight { get; set; }
}

• 图片热点实体，所有位置属性存占原图的百分比，适配不同终端的图片自适应场景

public class ImageHotspot
{
    public int Id { get; set; }
    // 关联所属图片
    public int ProductImageId { get; set; }
    // 热点位置、尺寸占比，取值范围0-1
    public decimal XPercent { get; set; }
    public decimal YPercent { get; set; }
    public decimal WidthPercent { get; set; }
    public decimal HeightPercent { get; set; }
    // 热点关联业务数据
    public int LinkedSaleProductId { get; set; }
    public string HoverTip { get; set; }
    // 导航属性
    public virtual ProductImage ProductImage { get; set; }
}

2. 后端接口实现 #

热点保存接口示例 #

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult SaveHotspots(int imageId, List<ImageHotspot> hotspotList)
{
    var targetImage = db.ProductImages.FirstOrDefault(p => p.Id == imageId);
    if (targetImage == null) return HttpNotFound();
    // 先删除该图片原有旧热点数据
    var oldHotspots = db.ImageHotspots.Where(h => h.ProductImageId == imageId);
    db.ImageHotspots.RemoveRange(oldHotspots);
    // 批量写入新热点
    foreach (var item in hotspotList)
    {
        item.ProductImageId = imageId;
        db.ImageHotspots.Add(item);
    }
    db.SaveChanges();
    return Json(new { success = true });
}

热点读取接口 #

前端展示时传入图片ID，直接查询对应热点列表返回JSON即可。

3. 前端交互实现 #

管理端热点编辑 #

• 加载原图后，监听用户点击/拖拽操作，计算操作位置相对于当前展示图片的偏移，再换算为占原图的百分比存入热点对象
• 可直接引入成熟的前端选区库完成交互，拿到选区坐标后自行换算为百分比即可
• 编辑完成后组装所有热点数据调用保存接口提交

用户端热点展示 #

1. 加载商品图片同时拉取对应热点列表
2. 图片渲染完成后，获取当前页面图片的实际显示宽高，将热点的百分比换算为实际像素，用绝对定位渲染在图片上方
3. 给热点绑定点击事件，触发跳转商品页/弹出购买弹窗等业务逻辑

注意事项 #

• 热点的定位父容器需要设置为和图片宽高一致的相对定位容器，避免定位偏移
• 监听窗口resize事件，图片大小变化时重新换算热点像素位置
• 提交热点前增加校验，过滤占比超出0-1范围的无效数据

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