监控安装位置智能标注工具 - 上传图片自动分析并标注监控摄像头建议安装位置
| 文件 | 最后提交记录 | 最后更新时间 |
|---|---|---|
| 17 天前 | ||
| 17 天前 | ||
| 17 天前 | ||
| 17 天前 | ||
| 17 天前 | ||
| 17 天前 |
监控安装位置智能标注工具 (Camera Position Advisor)
📷 上传一张图片，AI 自动分析并在图片上标注建议的监控摄像头安装位置
📖 项目简介
这是一个纯前端的 Web 工具，帮助安防工程师、装修设计师或普通用户快速规划监控摄像头的安装位置。用户只需上传一张房间/场地的照片，工具会自动分析图片内容，并在合理位置标注监控摄像头的建议安装点，同时显示覆盖范围。
✨ 功能特性
核心功能
- 🖼️ 图片上传：支持拖拽上传和点击上传，支持 JPG/PNG/WebP 等常见格式
- 🤖 智能分析：基于启发式算法自动分析图片，推荐摄像头安装位置
- 📍 位置标注：在图片上绘制 SVG 风格的摄像头图标
- 📐 覆盖范围：用半透明扇形显示每个摄像头的监控覆盖区域
- ✏️ 交互编辑：拖拽调整摄像头位置、添加/删除摄像头、双击空白快速添加
- 📊 参数显示：每个摄像头显示安装高度、俯仰角度、视场角、覆盖半径等参数
启发式算法
工具采用以下策略推荐摄像头位置：
- 网格分析：将图片划分为 12×9 网格，计算每个区域的亮度变化（简化版边缘检测）
- 候选点选择：优先选择图片四角和上方位置（符合实际安防最佳实践：角落、高处）
- 数量决策：根据图片宽高比决定推荐摄像头数量
- 宽高比 > 2：推荐 4 个摄像头
- 宽高比 > 1.4：推荐 3 个摄像头
- 其他：推荐 2 个摄像头
- 朝向优化：每个摄像头的覆盖扇形朝向图片中心区域
🛠️ 技术栈
| 技术 | 用途 |
|---|---|
| HTML5 | 页面结构 |
| CSS3 | 样式设计（响应式布局、现代 UI） |
| JavaScript (ES6+) | 核心逻辑（图片处理、位置分析、Canvas 绘制、交互） |
| HTML5 Canvas | 图片标注绘制 |
| HTML5 Drag & Drop API | 拖拽上传和位置调整 |
零依赖、零后端 — 纯前端实现，打开即用。
🚀 快速开始
本地运行
# 克隆仓库
git clone https://gitcode.com/Eddygit/camera-position-advisor.git
# 进入目录
cd camera-position-advisor
# 启动本地服务器（任选一种）
python3 -m http.server 8080
# 或
npx serve .
然后浏览器打开 http://localhost:8080 即可使用。
直接使用
无需安装任何依赖，直接用浏览器打开 index.html 即可（推荐使用 Chrome 或 Edge）。
📖 使用说明
- 上传图片：将图片拖拽到上传区域，或点击上传区域选择图片
- 自动分析：工具会自动分析图片并标注建议的摄像头位置
- 调整位置：拖拽摄像头图标可以调整位置
- 添加摄像头：点击"添加摄像头"按钮，或双击图片空白处
- 删除摄像头：选中摄像头后点击"删除"按钮
- 查看参数：左侧面板显示每个摄像头的详细参数
- 切换显示：可以切换覆盖范围、编号标签、分析网格的显示
📁 文件结构
camera-position-advisor/
├── index.html # 主页面
├── style.css # 样式文件
├── app.js # 核心逻辑
└── README.md # 项目说明
🎯 应用场景
- 🏠 家庭安防规划：上传房间照片，快速规划摄像头位置
- 🏢 商业安防设计：商场、办公室等场所的监控布局
- 🏫 校园安防配置：教室、走廊等区域的摄像头规划
- 🅿️ 停车场监控：停车场、车库的监控覆盖设计
📝 技术细节
图片分析算法
工具使用基于亮度变化的启发式算法分析图片：
- 将图片加载到隐藏 Canvas，提取像素数据
- 划分为 12×9 网格，每个网格计算平均亮度和亮度方差
- 亮度方差高的区域表示内容复杂，需要重点覆盖
- 结合安防最佳实践（角落、高处），生成候选位置
- 根据宽高比和覆盖需求，选择最优位置组合
Canvas 绘制
- 摄像头图标：使用 Canvas API 绘制 SVG 风格的摄像头图形
- 覆盖扇形：使用
arc()方法绘制半透明扇形 - 交互层：处理鼠标事件实现拖拽和选择
🔧 开发计划
📄 License
MIT License - 详见 LICENSE
🙏 致谢
本项目使用华为云 DevSpace 开发者工作空间开发，感谢华为云提供的开发环境支持。