개발(?) 배경
옆자리 동료가 MSTR에 시각화에 쓰일 이미지 맵을 만들기 위해 정체모를 프로그램을 통해 마우스클릭,클릭,클릭,...,클릭으로 구역별 외곽선 좌표를 추출하고 있었다... AI가 독후감도 써주는 시대에 이게 자동화가 안될까요?!
동료의 마우스가 빠른가? 나의 개발이 빠른가?
하루종일 대구시의 3개구를 추출하시는 동안 대구시 모든 구 좌표를 눈깜빡할 사이에 추출할 코드를 짜보기로 한다
이미지맵
이미지맵을 사용하면 이미지에 여러구역을 설정하여 여러개의 링크를 걸 수 있다
문법은 아래와 같다
<img src="이미지경로" alt="대체텍스트" usemap="#맵이름"> <map name="맵이름"> <!-- 1구역--> <area shape="도형유형" coords="링크좌표" alt="대체텍스트" href="링크경로"> <!-- 2구역--> <area shape="도형유형" coords="링크좌표" alt="대체텍스트" href="링크경로"> </map>
openCV라는 라이브러리가 이미지분석에 능하다니 사용해보기로하고 코드를 짜왔다
코드
import cv2
import numpy as np
from google.colab.patches import cv2_imshow
img = cv2.imread('/content/sample_data/seoul_2.jpg') # 이미지 불러오기
imgray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) # 이미지 그레이 전환
ret, thresh = cv2.threshold(imgray, 120, 255, 0) # 흑과 백으로 임계(threshold) 분할
contours, hierarchy = cv2.findContours(thresh, cv2.RETR_CCOMP, cv2.CHAIN_APPROX_NONE) # contour(외곽선)를 찾아냄.(연속된 좌표점)
cv2.drawContours(img, contours , -1, (0, 255, 0), 2) # contour(외곽선)을 그림, 초록색(0 255 0), 두께 2로 -- 확인용
cv2_imshow(img) # 이미지 출력
contours = np.array(contours)
arr= contours.ravel() # N차원의 꼭지점 배열을 1차원으로 축소
print('--좌표--\n')
print(*arr, sep=',') # 배열사이에 들어갈 문자를 지정한 뒤 출력
print('\n')코랩에서 이미지를 업로드하고 경로를 넣어 실행하면 좌표배열이 아주 잘 나온다
샘플
샘플로 서울지도에서 강북을 클릭하면 네이버 강남은 다음카카오가 나오도록 만들어보자
원본이미지는 위와 같고 최외곽을 잘 인식하도록 이미지의 가공이 필요하다
배경을 꼭 검은색으로 해주어야 이미지 자체 최외곽에 contour가 안찍힌다
이것 때문에 꽤 삽질함.. 왜 자꾸 최외곽이 컨투어로 인식되나 했네
그림판에서 강남강북을 쪼개 흰색으로 색칠해왔다...
seoul_1,seoul_2 파일을 올려주고 각각 실행해주면
이미지맵에 사용할 수 있는 좌표가 나온다
결과값을 이미지맵html 내에 넣어주면
<!DOCTYPE html>
<html>
<head>
<title> 서울지도 이미지맵 </title
</head>
<body>
<img src="https://velog.velcdn.com/images/hyoju2259/post/c32b94a5-1cb1-4ed3-aad9-7eeb7a110365/image.jpg" alt="대체텍스트" usemap="#서울">
<map name="서울">
<area shape="poly" coords="260,38,261,37,262,38,263,38,264,38,265,38,266,38,267,38,268,38,269,38,270,39,270,40,271,41,271,42,271,43,272,44,272,45,272,46,273,47,274,47,275,46,276,46,277,45,278,45,279,44,280,44,281,44,282,44,283,44,284,45,285,45,286,46,286,47,286,48,287,49,287,50,287,51,288,52,289,51,290,51,291,50,292,49,293,49,294,48,295,47,296,47,297,46,297,45,298,44,299,44,300,44,301,43,302,43,303,43,304,43,305,43,306,43,307,43,308,43,309,43,310,43,311,43,312,43,313,44,313,45,313,46,313,47,314,48,315,49,316,49,317,49,318,49,319,49,320,49,321,49,322,50,323,51,323,52,323,53,322,54,322,55,321,56,321,57,320,58,320,59,320,60,320,61,320,62,321,63,322,64,322,65,322,66,323,67,322,68,322,69,322,70,322,71,322,72,322,73,322,74,322,75,321,76,320,77,320,78,319,79,319,80,319,81,319,82,319,83,319,84,320,85,320,86,320,87,320,88,320,89,321,90,321,91,321,92,322,93,323,94,324,94,325,94,326,93,327,93,328,93,329,93,330,93,331,93,332,93,333,94,333,95,333,96,334,97,334,98,335,99,335,100,335,101,336,102,336,103,336,104,335,105,334,106,333,107,333,108,332,109,331,109,331,110,330,111,330,112,330,113,330,114,329,115,329,116,330,117,331,118,332,118,333,118,334,118,335,118,336,118,337,118,338,118,339,119,339,120,339,121,339,122,339,123,340,124,340,125,340,126,340,127,340,128,340,129,340,130,340,131,340,132,340,133,339,134,338,135,337,136,337,137,337,138,338,139,338,140,338,141,339,142,338,143,337,144,336,144,336,145,335,146,335,147,335,148,334,149,334,150,334,151,334,152,333,153,332,154,331,155,330,155,329,156,328,157,328,158,328,159,327,160,327,161,327,162,327,163,327,164,328,165,329,166,329,167,329,168,328,169,328,170,328,171,328,172,327,173,327,174,327,175,327,176,327,177,328,178,329,179,330,180,331,180,332,180,333,179,334,179,335,178,336,178,337,179,337,180,336,181,336,182,336,183,335,184,335,185,334,186,334,187,334,188,334,189,334,190,333,191,332,192,332,193,331,194,330,195,329,196,328,197,327,198,326,199,325,200,324,201,323,202,322,203,321,204,321,205,320,206,319,207,318,208,317,208,316,209,315,209,314,209,313,209,312,209,311,209,310,209,309,208,308,208,307,208,306,208,305,208,304,207,303,207,302,207,301,206,300,205,299,205,298,204,297,204,296,203,295,203,294,202,293,202,292,201,291,201,290,201,289,200,288,200,287,200,286,199,285,199,284,199,283,198,282,198,281,197,280,197,279,197,278,196,277,196,276,196,275,195,274,195,273,195,272,194,271,194,270,194,269,194,268,194,267,194,266,194,265,194,264,195,263,196,262,197,261,198,261,199,260,200,260,201,259,202,259,203,258,204,257,205,256,206,255,207,254,208,253,208,252,209,251,210,250,211,250,212,249,213,248,214,247,215,246,215,245,216,244,216,243,217,242,218,241,218,240,219,239,220,238,220,237,220,236,220,235,220,234,220,233,220,232,220,231,220,230,220,229,220,228,220,227,219,226,219,225,218,224,218,223,217,222,217,221,216,220,216,219,215,218,215,217,214,216,214,215,214,214,213,213,212,212,211,212,210,212,209,212,208,212,207,211,206,210,205,209,204,208,203,207,202,206,202,205,201,204,200,203,199,203,198,202,197,202,196,201,195,200,195,199,194,198,194,197,194,196,194,195,194,194,193,193,193,192,192,191,192,190,192,189,192,188,192,187,193,186,193,185,193,184,193,183,193,182,193,181,193,180,192,179,192,178,191,177,190,176,189,175,188,174,188,173,187,172,186,171,185,170,184,169,183,168,182,167,181,166,180,165,180,164,179,163,178,162,177,161,177,160,176,159,175,158,174,157,173,156,173,155,172,154,172,153,171,152,171,151,170,150,170,149,169,148,168,147,167,146,166,145,165,144,164,143,163,142,162,141,161,142,160,143,160,144,159,145,159,146,159,147,159,148,159,149,159,150,159,151,159,152,158,152,157,152,156,152,155,152,154,152,153,152,152,152,151,153,150,154,149,155,148,156,147,156,146,157,145,158,146,158,147,159,148,160,148,161,148,162,148,163,148,164,148,165,148,166,148,167,148,168,148,169,147,169,146,169,145,170,144,170,143,171,142,171,141,171,140,171,139,171,138,171,137,171,136,171,135,171,134,171,133,171,132,170,131,170,130,170,129,170,128,170,127,170,126,171,125,171,124,171,123,172,122,172,121,173,120,173,119,174,118,174,117,175,116,175,115,175,114,176,113,176,112,177,111,177,110,177,109,177,108,177,107,177,106,178,105,178,104,178,103,178,102,178,101,178,100,179,99,179,98,179,97,179,96,179,95,179,94,180,93,181,93,182,93,183,93,184,92,185,92,186,92,187,92,188,92,189,92,190,91,191,90,192,89,193,88,194,88,195,88,196,87,197,87,198,87,199,86,199,85,199,84,200,83,200,82,201,81,202,81,203,81,204,80,205,80,206,79,207,80,208,81,209,81,210,82,211,83,212,84,213,84,214,85,214,86,214,87,215,88,215,89,215,90,215,91,216,92,216,93,216,94,216,95,217,96,217,97,217,98,217,99,218,100,218,101,218,102,218,103,219,104,218,105,217,106,217,107,218,108,219,108,220,108,221,107,222,107,223,106,224,106,225,106,226,105,227,105,228,104,229,104,230,103,231,103,232,103,233,102,234,102,235,102,236,101,236,100,236,99,236,98,236,97,236,96,236,95,236,94,236,93,236,92,236,91,235,90,235,89,234,88,234,87,233,86,233,85,233,84,232,83,233,82,234,81,235,81,236,80,237,79,238,78,238,77,238,76,238,75,239,74,240,73,241,73,242,72,243,71,243,70,243,69,243,68,243,67,243,66,243,65,243,64,243,63,243,62,243,61,243,60,242,59,243,58,244,57,245,56,246,55,247,55,248,55,249,55,250,55,251,54,252,54,253,54,254,54,255,53,255,52,255,51,255,50,255,49,255,48,255,47,255,46,255,45,255,44,255,43,256,42,257,41,258,40,259,39" alt="대체텍스트" href="https://www.naver.com/">
<area shape="poly" coords="92,137,92,138,92,139,92,140,93,141,93,142,93,143,93,144,93,145,94,146,94,147,94,148,93,149,92,150,92,151,91,152,90,153,89,154,89,155,88,156,87,157,86,158,86,159,85,160,84,161,83,162,82,163,81,164,80,164,79,164,79,165,79,166,79,167,79,168,78,169,77,170,76,171,75,172,75,173,75,174,75,175,74,176,73,177,72,178,71,179,70,180,69,181,68,182,67,182,67,183,68,184,69,185,69,186,70,186,71,186,72,186,73,187,74,188,75,188,76,188,77,188,78,188,79,188,80,188,81,188,82,189,83,190,84,191,85,192,86,193,87,194,88,195,88,196,88,197,88,198,89,198,89,197,90,196,91,195,92,194,93,193,94,192,95,192,96,192,97,191,98,192,99,192,100,193,101,193,102,194,103,194,104,194,105,194,106,194,107,194,108,194,109,195,110,196,110,197,111,198,111,199,111,200,111,201,111,202,112,203,112,204,112,205,113,206,114,207,115,208,116,209,116,210,115,211,115,212,115,213,114,214,114,215,113,216,113,217,112,218,112,219,112,220,112,221,112,222,112,223,112,224,112,225,112,226,112,227,112,228,112,229,111,230,111,231,111,232,110,233,110,234,110,235,109,236,108,237,107,238,106,239,105,239,104,240,105,241,106,242,107,243,108,243,109,244,110,245,111,246,112,247,111,248,110,249,109,250,108,251,108,252,108,253,108,254,108,255,108,256,108,257,107,258,106,259,107,258,108,257,109,257,110,257,111,257,112,257,113,257,114,257,115,257,116,256,117,256,118,256,119,257,120,257,121,258,122,258,123,259,124,259,125,259,125,258,126,257,126,256,126,255,127,254,128,253,129,252,130,252,131,252,132,252,133,251,134,250,135,249,136,248,137,247,138,246,139,245,140,244,141,243,142,242,143,241,144,240,145,240,146,241,147,242,148,243,149,244,149,245,150,245,151,246,152,247,152,248,152,249,151,250,151,251,151,252,151,253,152,254,152,255,153,256,153,257,154,258,154,259,154,260,155,261,155,262,156,263,156,264,156,265,157,266,157,267,158,268,159,269,160,270,160,271,160,272,160,273,160,274,160,275,161,276,161,277,161,278,161,279,162,280,163,280,164,281,165,281,166,282,167,283,168,284,168,285,168,286,169,287,169,288,169,289,170,290,170,291,170,292,171,293,171,294,171,295,172,296,172,297,173,298,174,298,175,298,176,299,177,298,177,297,178,296,179,295,180,294,181,293,182,293,183,293,184,293,185,292,186,291,186,290,187,289,188,288,188,287,189,286,190,285,191,284,192,284,193,285,194,286,194,287,195,288,195,289,196,290,197,291,198,292,199,293,200,294,201,295,202,296,203,296,204,295,205,295,206,295,207,294,208,294,209,294,210,294,211,294,212,293,213,293,214,293,215,293,216,293,217,292,218,292,218,291,218,290,218,289,219,288,220,287,221,286,222,285,223,285,224,284,225,283,225,282,226,281,227,280,228,279,229,278,230,278,231,277,232,277,233,276,234,276,235,275,236,275,237,274,238,274,239,274,240,273,241,273,242,272,243,272,243,271,243,270,244,269,245,268,246,267,247,266,248,266,249,266,250,266,251,267,252,268,253,269,253,270,253,271,254,272,254,273,255,274,255,275,256,276,257,277,257,278,258,277,259,277,260,277,261,277,262,277,263,276,264,276,265,276,266,276,267,276,267,275,267,274,268,273,268,272,269,271,270,270,271,269,272,268,273,269,274,269,275,270,276,271,277,272,277,273,278,274,278,275,278,276,278,277,278,278,279,279,279,280,278,281,278,282,278,283,278,284,279,285,279,286,280,287,280,288,280,289,279,290,279,291,278,292,278,293,277,294,278,294,279,295,280,296,281,297,282,298,283,299,284,300,285,301,286,302,287,303,288,304,289,304,290,304,291,304,292,304,293,303,294,303,295,303,296,303,297,303,298,303,299,302,300,302,301,302,301,301,301,300,301,299,302,298,302,297,302,296,302,295,302,294,303,293,304,292,305,291,306,291,307,291,308,291,309,291,310,292,311,292,312,291,313,290,314,290,315,289,315,288,315,287,315,286,316,285,316,284,317,283,317,282,318,281,319,280,320,279,321,278,322,277,323,276,324,277,325,277,326,276,327,275,328,274,329,273,330,272,331,271,332,271,333,272,334,272,335,272,336,272,337,273,338,273,339,272,340,271,341,270,342,269,343,268,344,268,345,267,346,266,347,265,348,264,349,265,350,264,350,263,350,262,351,261,352,260,353,259,354,259,355,259,356,259,357,259,358,259,359,259,360,258,361,257,361,256,361,255,361,254,362,253,363,252,364,251,365,250,366,249,367,248,368,247,369,246,370,245,370,244,370,243,370,242,371,241,371,240,371,239,371,238,371,237,372,236,371,236,370,235,369,235,368,235,367,234,366,234,365,234,364,234,363,234,362,235,361,234,360,233,359,232,358,231,357,230,356,229,356,228,356,227,356,226,356,225,356,224,357,223,358,222,358,221,359,220,359,219,359,218,360,217,360,216,360,215,360,214,361,213,362,212,363,211,363,210,364,209,365,208,366,207,366,206,366,205,366,204,366,203,366,202,367,201,368,200,368,199,369,198,370,197,371,196,371,195,372,194,373,193,374,192,375,191,376,190,377,189,378,189,379,189,380,189,381,189,382,189,383,189,384,189,385,188,386,188,387,188,388,188,389,188,389,187,389,186,389,185,388,184,388,183,388,182,388,181,388,180,388,179,388,178,388,177,388,176,388,175,388,174,387,173,387,172,387,171,386,170,386,169,386,168,385,167,385,166,385,165,385,164,384,163,384,162,384,161,383,160,383,159,382,160,381,160,380,160,379,160,378,160,377,160,376,161,375,162,374,163,373,163,372,164,371,165,370,166,369,166,368,167,367,168,366,169,365,169,364,170,363,170,362,170,361,170,360,170,359,170,358,170,357,171,356,172,355,173,354,174,353,174,352,175,351,176,350,177,349,178,349,179,348,180,348,181,347,182,347,183,347,184,346,185,346,186,345,187,345,188,345,189,344,190,344,191,344,192,343,193,343,194,342,195,342,196,341,197,340,198,340,199,339,200,339,201,338,202,338,203,337,204,336,205,336,206,335,207,334,208,334,209,333,210,332,211,331,212,330,213,329,214,328,215,327,216,326,217,325,217,324,218,323,218,322,219,321,219,320,219,319,220,318,220,317,220,316,221,315,221,314,221,313,221,312,221,311,220,310,220,309,220,308,220,307,220,306,220,305,220,304,220,303,219,302,219,301,219,300,219,299,218,298,217,297,216,296,216,295,215,294,214,293,213,292,213,291,212,290,211,289,211,288,210,287,210,286,210,285,209,284,209,283,209,282,208,281,208,280,208,279,207,278,207,277,207,276,206,275,206,274,206,273,205,272,205,271,205,270,205,269,206,268,207,267,208,266,209,265,210,264,211,263,212,262,213,261,214,260,215,259,216,258,217,257,218,256,219,256,220,255,221,254,222,253,223,252,224,251,225,250,225,249,226,248,226,247,227,246,228,245,229,244,230,243,231,242,232,241,232,240,233,239,232,238,232,237,232,236,232,235,232,234,233,233,233,232,233,231,233,230,232,229,232,228,232,227,232,226,231,225,231,224,230,223,230,222,229,221,228,220,228,219,227,218,227,217,226,216,226,215,225,214,225,213,224,212,224,211,223,210,223,209,222,208,221,207,220,206,219,206,218,205,217,204,216,203,215,202,215,201,215,200,214,199,213,198,212,197,211,196,210,195,209,194,208,193,208,192,208,191,207,190,206,189,206,188,205,187,205,186,205,185,205,184,205,183,204,182,204,181,204,180,204,179,203,178,204,177,204,176,203,175,203,174,202,173,201,172,200,171,199,170,199,169,198,168,197,167,196,166,196,165,195,164,194,163,193,162,192,161,191,160,191,159,190,158,189,157,188,156,188,155,187,154,187,153,186,152,185,151,184,150,183,149,182,148,182,147,181,146,180,145,179,144,178,143,178,142,177,141,176,140,175,139,175,138,174,137,173,136,172,135,172,134,171,133,170,132,169,131,169,130,168,129,167,128,166,127,165,126,164,125,163,124,163,123,163,122,162,121,162,120,161,119,161,118,160,117,160,116,159,115,158,114,158,113,157,112,157,111,156,110,155,109,154,108,154,107,153,106,152,105,151,104,151,103,150,102,149,101,148,100,147,99,146,98,145,97,144,96,143,96,142,95,141,94,140,94,139,93,138" alt="대체텍스트" href="https://www.daum.net/">
</map>
</body>
</html>Ta-da 테스트 해보셔라
요즘은 이미지맵 많이 안쓴단다 그래도 오랜만에 파이썬 재밌짜냐
김효주