1. Preliminary investigation:

1. New project requirements:

By reading the urban design map uploaded by Party A, identify the plot and category, and then do a bunch of automatic operations….

Given this requirement, the front end uses Canvas for manipulation and presentation, and opencV does the image reading and a lot of automation.

2. Try:

(1) : js directly uses python’s opencv.js package. Opencv code looks like this:

To show you an example of reading and redrawing a graph, it looks very cumbersome, and Opencv.js is surprisingly high at 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>
Copy the code

(2) : Node.js tries

Opencv4nodejs is mature. But I tried all morning, the first step installation, following various tutorials, still couldn’t pass.

(3) : Colleagues try using Java:

Graph matrix, Java is very uncomfortable to write. Automation requirements section, fewer Java cases.

Two: Tune Python

Python-opencv is just a wrapper around calling c++,

But here’s the nice thing about Python

1: There are many documents and cases:

2: There are multiple types of algorithms

3: simple syntax, adapt to the matrix information of the graph

1: Implement a simple graph-reading method in Python

After learning simple Python for half a day, I started to learn OpencV. There are many good Python-OpencV tutorials in B station.

Currently achieved:

(1) : Read the picture

(2) : Obtained plot information:

Coordinate information of perimeter, area, x and y [{x,y}]

Question:

(1) : There is a problem with adaptiveThreshold and it is being processed

(2) : The color of the plot has not been obtained.

Import cv2 import numpy as np def cv_findCotours(SRC): # For higher accuracy, Using binary image img = cv2. Imread (SRC) # closed operation first expansion in corrosion. The kernel = cv2 getStructuringElement (cv2 MORPH_RECT, (5, Closing = cv2.morphyex (img, cv2.morph_close, 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, Threshold (gray, 0, 255, THRESH_BINARY + cv2.thresh_otsu) # Cv2.imshow ('thresh', thresh) cv2.waitkey (0) cv2.canny (thresh,70,100) cv2.imshow(' Canny ', Edges) cv2.waitKey(0) # contours, hierarchy = cv2.findContours(thresh, cv2.retr_tree, Draw_img = img.copy() res =cv2. draw_img (draw_img,contours,-1,(255,0,0),1); draw_img = img.copy() res =cv2. draw_img,contours,-1,(255,0),1); json_res = [] for item in contours: # perimeter = cv2.arcLength(item,True) # perimeter = cv2.arcLength(item,True) # imgM = cv2.moments(item) # matrix point coordinates box = [] # # #. To do polygon approximation, 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, Imshow ('canny',res) cv2.waitkey (0) # call cv_findCotours('.. /demo3.png')Copy the code

Effect:

1. Simple test design drawing:

2: The front-end canvas, to get the data to draw the result, there are obviously some problems:

Post a few nice sites:

codec.wang/#/opencv/

Zhuanlan.zhihu.com/c\_10946076…