​某城市会展中心室内地图

背景

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

问题

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

提取矩形顶点坐标

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

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

图片预处理

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

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

处理后的图片如下

处理后的图片

边缘检测

# 边缘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)# 显示所有轮廓mask = np.zeros(img.shape)for c in contours:    # 过滤小面积    if (cv2.contourArea(c) < scale ** 2):        continue    cv2.drawContours(mask, [c], 0, (0, 0, 255))cv2.imshow('contours', mask)

关于函数findContours介绍可以参考：

提取到的轮廓

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

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

提取矩形获取顶点

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 cv2import numpy as npimport 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 = 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)    json_res = []    # mask = np.zeros(img.shape)    for c in contours:        # 过滤小面积        if (cv2.contourArea(c) < scale ** 2):            continue        rect = 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()

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