前端对opencv识图的尝试

·  阅读 1601
前端对opencv识图的尝试

一:初步调研:

1:新项目需求:

通过读取甲方上传的城市设计图,识别地块、类别,后面在做一堆自动化操作....

拿到这个需求,前端使用canvas实现操作和展示,读取图片和一堆自动化由opencv完成。

2:尝试:

(1):js直接使用python打包好的opencv.js包,opencv的代码是这样的:

    先展示一个读取图和重新绘图的案例,看起来非常麻烦,而且opencv.js居然高达10.9M。

<script id="codeSnippet" type="text/code-snippet">
let src = cv.imread('canvasInput');
let dst = new cv.Mat();
let gray = new cv.Mat();
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
cv.threshold(gray, gray, 0, 255, cv.THRESH_BINARY_INV + cv.THRESH_OTSU);
cv.imshow('canvasOutput', gray);
src.delete(); 
dst.delete();
 gray.delete();
</script>
复制代码

(2):node.js尝试

 opencv4nodejs比较成熟。但是我尝试了一个上午,第一步安装,按各种教程来,依然无法通过。

(3):同事用Java尝试:

图形的矩阵,java写起来很难受。自动化需求部分,java案例较少。

二:定调python

python-opencv也仅仅是调用c++的封装而已,

不过python好处是

1:文档和案例很多:

2:算法种类多全

3:语法简单,适应图形的矩阵信息

1:用python实现一个简单的读取图形方法

花了半天学了简单的python,就开始学opencv,B站很多好的python-opencv教程。

目前实现了:

(1):读取图片

(2):取到的地块信息:

周长,面积,x,y构成的坐标信息[{x,y}]

问题:

(1):adaptiveThreshold这边有问题,在处理

 (2):地块颜色还没取到。

# 边缘检测import cv2

import numpy as np
def cv_findCotours(src):    
   # 为了更高的准确率,使用二值图像    
   img = cv2.imread(src)    
   # 闭运算 先膨胀在腐蚀    
   kernel = cv2.getStructuringElement(cv2.MORPH_RECT, (5, 5))  
   # 定义结构元素    
   closing = cv2.morphologyEx(img, cv2.MORPH_CLOSE, kernel)  
   # 闭运算    
   #黑白蒙层    
   gray = cv2.cvtColor(closing,cv2.COLOR_BGR2GRAY)
   # 第一次展示图片    
   cv2.imshow('lena', gray)    
   cv2.waitKey(0)    
   thresh = cv2.adaptiveThreshold(gray,255, 
   cv2.ADAPTIVE_THRESH_MEAN_C,cv2.THRESH_BINARY, 11, 4)  
   # ret,thresh =  cv2.threshold(gray, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU)    
   #这边已经出现了点问题,多个聚在一起的识别有误。   
   cv2.imshow('thresh', thresh)    
   cv2.waitKey(0)    
   edges  = cv2.Canny(thresh,70,100)    
   cv2.imshow('canny', edges)    
   cv2.waitKey(0)    
   # 开始绘制轮廓    
   contours, hierarchy = cv2.findContours(thresh, cv2.RETR_TREE, cv2.CHAIN_APPROX_SIMPLE)
   # 得到数据,绘制轮廓    
   draw_img = img.copy()    
   res =cv2.drawContours(draw_img,contours,-1,(255,0,0),1);    
   json_res = []    
   for item in contours:          
     #面积        
     area = cv2.contourArea(item)        
     # 周长        
     perimeter = cv2.arcLength(item,True)        
     # 图形矩        
     imgM = cv2.moments(item)        
     #矩阵点坐标        
     box = []        
     ###.进行多边形逼近,得到多边形的角点        
     epsilon = 0.01*cv2.arcLength(item,True)        
     approx = cv2.approxPolyDP(item, epsilon, True)        
     box = key_point_2_array(approx)        
     json_res.append({            
        'points':box,            
        'area':area,            
        'perimeter':perimeter,            
        'imgM':imgM        })    
    # # 坐标    
    # 展示   
     cv2.imshow('canny',res)    
     cv2.waitKey(0)
    
    # 调用
    cv_findCotours('../demo3.png')
复制代码

效果图:

1:简单测试设计图:

2:前端canvas,拿到数据好绘制结果,明显有些问题:

贴上几个不错的网站:

codec.wang/#/opencv/

zhuanlan.zhihu.com/c\_10946076…

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改