背景
一名室内设计师的日常工作从设计一张会展地图开始。常常有这样的场景:划分除规范的展位后,进入销售阶段,频繁的需要修改这张地图,如展示拆分、合并、换位置、标记已交易。
问题
从上图中标记色块的是有效展位,经过设计师设计确定了坐标、尺寸、编号(不重要)。需要解决的是从图片中提取出色块的精确位置和尺寸,然后通过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介绍可以参考:https://www.cnblogs.com/yiyi20120822/p/11506970.html
提取到的轮廓基本完整,属于规则的圆角矩形。上图因为弹窗渲染问题显示不全,其实红色的框是一个非常漂亮地闭合矩形。
这里更具不同参数可提取不同的轮廓,这里我只去了最外层。另外我需要的是规则矩形,因此不需要额外的寻找凸包-提取顶点。用一个比较单间的最小包围矩形就能得到想要的结果。
提取矩形获取顶点
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()
下一篇文章补充页面还原问题。