背景

一名室内设计师的日常工作从设计一张会展地图开始。常常有这样的场景：划分除规范的展位后，进入销售阶段，频繁的需要修改这张地图，如展示拆分、合并、换位置、标记已交易。

问题

从上图中标记色块的是有效展位，经过设计师设计确定了坐标、尺寸、编号（不重要）。需要解决的是从图片中提取出色块的精确位置和尺寸，然后通过html5展示到页面上；后续修改操作（合并、拆分等）完全通过页面在完成。

提取矩形顶点坐标

矩形的检测主要是提取边缘，图中色块部分明显有别于周围颜色（指灰度），我们可以将图片灰度，将展位部分与过道部分明显的分别开，对后续做边缘计算就非常有帮助。

检测矩形并提取坐标需要对图像进行预处理、边缘检测、提取轮廓、检测凸包（或者最小矩形）、顶点获取。

图片预处理

由于图片的特性，只要做转灰度、中值滤波

img = cv2.imread(url)
# 灰度图，滤波
gray = cv2.cvtColor(img, cv2.COLOR_RGB2GRAY)
gray = cv2.medianBlur(gray, 15)

处理后的图片如下

边缘检测

# 边缘
CANNY_THRESH_1 = 90
CANNY_THRESH_2 = 120
edges = cv2.Canny(gray, CANNY_THRESH_1, CANNY_THRESH_2)
edges = cv2.dilate(edges, None, iterations=3)
edges = cv2.erode(edges, None, iterations=1)

边缘特征比较明显，不同的图片系数差别不大。当前系数效果可以使用。更细的参数没有调整。

另外做了一些放大和腐蚀，把不需要的一些小的文字区域过滤掉了。方便过滤不需要的轮廓。

提取轮廓

# 查找轮廓
contours, _ = cv2.findContours(edges, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)# 显示所有轮廓
mask = np.zeros(img.shape)
for c in contours:# 过滤小面积if (cv2.contourArea(c) < scale ** 2):continuecv2.drawContours(mask, [c], 0, (0, 0, 255))cv2.imshow('contours', mask)

关于函数findContours介绍可以参考：OpenCV—Python 轮廓检测绘出矩形框（findContours\ boundingRect\rectangle - bluesky0318 - 博客园

提取到的轮廓基本完整，属于规则的圆角矩形。上图因为弹窗渲染问题显示不全，其实红色的框是一个非常漂亮地闭合矩形。

这里更具不同参数可提取不同的轮廓，这里我只去了最外层。另外我需要的是规则矩形，因此不需要额外的寻找凸包-提取顶点。用一个比较单间的最小包围矩形就能得到想要的结果。

提取矩形获取顶点

rect = cv2.minAreaRect(cnt)
box = cv2.boxPoints(rect)
box = np.int0(box)

# 打印box的结果，每一组四个point顺时针显示
# 第一个矩形
[[5350 4899][5350 4784][5791 4784][5791 4899]]
# 第二个矩形
[[4804 4900][4804 4785][5247 4785][5247 4900]]
# ……

结束

截止到这里，已经得到了需要的基础数据信息。根据坐标信息即可把展位还原到页面上。

完整代码附上

#!/usr/bin/python3
# coding:utf-8
# description: 标记地图的色块位置
# user: arik
# @time: 2020/1/3 10:45import cv2
import numpy as np
import log##
# url: 图片地址
# scale: 图片比例，例如 3m=100px，3m是图片的基本单元尺寸
# #
def get_rectangle(url, scale=100):img = cv2.imread(url)# 灰度图，滤波gray = cv2.cvtColor(img, cv2.COLOR_RGB2GRAY)gray = cv2.medianBlur(gray, 15)# cv2.imshow('line', gray)# 边缘CANNY_THRESH_1 = 90CANNY_THRESH_2 = 120edges = cv2.Canny(gray, CANNY_THRESH_1, CANNY_THRESH_2)edges = cv2.dilate(edges, None, iterations=3)edges = cv2.erode(edges, None, iterations=1)# 查找轮廓contours, _ = cv2.findContours(edges, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)json_res = []# mask = np.zeros(img.shape)for c in contours:# 过滤小面积if (cv2.contourArea(c) < scale ** 2):continuerect = cv2.minAreaRect(c)box = cv2.boxPoints(rect)box = np.int0(box)# cv2.drawContours(mask, [c], 0, (0, 0, 255))box = key_point_2_array(box)json_res.append(box)# 输出到文件log.json_log(json_res)# 显示图片# cv2.imshow('line', mask)##
# point转数组
# #
def key_point_2_array(box):res = []for p in box:res.append([p[0], p[1]])return resif __name__ == "__main__":get_rectangle('images/origin/map1.jpg', 100)# cv2.waitKey(0)# cv2.destroyAllWindows()

下一篇文章补充页面还原问题。

利用OpenCV从图片中提取矩形并标注坐标（室内平面地图）——（一）相关推荐

opencv获取图片像素坐标_利用OpenCV从图片中提取矩形并标注坐标（室内平面地图）（一）
某城市会展中心室内地图背景一名室内设计师的日常工作从设计一张会展地图开始.常常有这样的场景:划分除规范的展位后,进入销售阶段,频繁的需要修改这张地图,如展示拆分.合并.换位置.标记已交易. 问题 ...
利用OpenCV对图像倾斜矩形目标区域进行固定大小裁剪
文章目录目的效果展示为什么要固定大小裁剪? 代码及解释原始文件代码代码解释 ① 主程序 ② ReadTxt() 函数 ③ rotate() 函数目的这篇博客主要介绍如何使用 OpenC ...
利用matlab从图片中提取曲线坐标数据
目录 0.引言 1.思路详解与分析 2.MATLAB程序 0.引言在读文献的时,经常遇到这样的情况:文章里提出的方法好有趣啊,好想拿文中用的数据来试试看看能不能得到相近的结果,可是文中只有根据原 ...
lisp提取长方形坐标_如何利用lisp程序一次性提取CAD中点的坐标(不要点击每个点,太多了麻烦)...
(DEFUN C:TT ( / ss ff ss1 en pt x y) (setvar "cmdecho" 0) (setvar "blipmode" 0) ...
opencv实现图片中文字识别并切割
背景: 为了提升用户欣赏书法图片的体验,需要从高清TIF图片中把每个字都切割出来,手动切割太麻烦,所以利用opencv自动识别图片中的文字,并将每个文字切割保存. 实现代码: import cv2 i ...
利用OpenCV提取图像中的矩形区域（PPT屏幕等）
** 前言 ** 最近参加了大创项目,题目涉及到计算机视觉,学姐发了个修正图像的博客链接,于是打算用这个题目入门OpenCV. 分析问题照片中的PPT区域总是沿着x,y,z三个轴都有倾斜(如下图), ...
iOS利用OpenCV 实现文字行区域提取的尝试
一些探索最近下了几个OCR的App(比如白描),发现可以选中图片中的文字行逐行转成文字,觉得很有意思(当然想用要花钱啦),想着自己研究一下实现原理,google之后,发现了两个库,一个是OpenCV ...
opencv 识别长方形_利用opencv识别并提取图片中的矩形
这次是利用opencv来识别图片中的矩形. 其中遇到的问题主要是识别轮廓时矩形内部的形状导致轮廓不闭合. 过程如下: **1. 对输入灰度图片进行高斯滤波 2. 做灰度直方图,提取阈值,做二值化处理 ...
利用opencv进行圆形标志提取和质心计算
利用opencv进行圆形标志提取和质心计算最近跟着老师做项目,需要对图片中拍摄的圆形标志点进行检测和提取,查了一些资料和博客,记录一下过程.实际拍摄的图片如图所示: 图片处理过程的大概思路是: 1. ...

利用OpenCV从图片中提取矩形并标注坐标（室内平面地图）——（一）

问题