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

某城市会展中心室内地图

背景

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

问题

从上图中标记色块的是有效展位，经过设计师设计确定了坐标、尺寸、编号（不重要）。需要解决的是从图片中提取出色块的精确位置和尺寸，然后通过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):
        continue

    cv2.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:45

import 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 = 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 res


if __name__ == "__main__":
    get_rectangle('images/origin/map1.jpg', 100)
    # cv2.waitKey(0)
    # cv2.destroyAllWindows()

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