이미지 관련 삽질(hack this site level 6)

2차삽질 : http://qkqhxla1.tistory.com/344

문제.

https://www.hackthissite.org/missions/prog/6/

저기 링크가 걸려있는 HERE을 누르면 아래에 캡쳐한것과 같은 화면이 뜬다. 거기서 글자를 인식해서 차례차례 써서 제출하면 된다.

각각의 글자는 자바스크립트로 그려지며, 선분 하나하나가 그려지는 형태이기 때문에 소스코드를 본다고 글자를 추출해 낼수 없다.(소스코드가 태그로 감싸진게 아니라 자바스크립트 자체로 직접 그린다.) 

예제 소스코드.

source.html

따라서 OCR을 구현하거나 자바스크립트를 해석해서 어떤 글자가 만들어지는지 봐서 풀어야 하는데 난 OCR로 해보려고 삽질을 했었다. 아래는 삽질한 내용이다.

엄청나게 삽질을 해 봤지만 결국 실패.......... 결과물을 버려두기는 아까워서 적어둠.

내가 예측한 문제 푸는 방법.

1. pyscreenshot모듈로 가로 세로 길이가 맞게 잘 캡쳐해온다.(아래 이미지)

2. 이미지를 조금 더 진하게 만든다.(이미지 보정) 크기보정도 해봤지만 너무 오래 걸려서 그건 하다 말았다.

3. 1줄씩 가져온다. EX) 지금은 5EF89283... 이런식으로. 이미지를 자세히보면 원 하나에 36글자이다. 즉 360도/36=10도씩 오른쪽이나 왼쪽으로 돌려서 이미지를 인식하면 된다.

4. (예상) 아래의 경우 첫번째는 5EF89283이 나올테고, 두번째는 1C7B3B4가 나올것이다!

5. 결과

사진을 -20도를 돌린 결과 이미지가 부드럽게 안 돌아가고 불안정하게 깨지면서 기본 ocr 모듈인 pytesser가 글자를 제대로 인식 못하는 버그가 발생. 이로서 1차 삽질은 포기..

결론.

이미지 인식하려면 제대로 opencv를 공부해서 ocr을 직접 구현해서 하자.

쓰다만 코드

# -*- encoding: cp949 -*-
import pyscreenshot as ImageGrab
import time,Image,pytesser
"""
time.sleep(1)
# 원하는 부분 스크린샷을 찍음. 내 컴퓨터 기준으로 잡은 좌표. 원시적이게도 프로그램 실행 후 바로 캡챠 화면을 보여줘야 된다 (;;)
im = ImageGrab.grab(bbox=(160,170,850,860)).save('cap.png') 
im = Image.open('cap.png')
for i in range(0,im.size[1]):
    for j in range(0,im.size[0]):
        if im.getpixel((j,i))[1] == 128: #보정
            try:
                im.putpixel((j,i),(0,255,0))
                im.putpixel((j,i+1),(0,255,0))
                im.putpixel((j,i+2),(0,255,0))
            except:
                pass
im.save('cap1.png')
"""

print pytesser.image_to_string(Image.open('cap1.png').crop((350,0,375,275))) #crop은 내부의 좌표대로 잘라오는 메소드...

im = Image.open('cap1.png').rotate(20).show() #show()는 사진을 보여주라는 메소드...
print pytesser.image_to_string(Image.open('cap1.png').rotate(20).crop((350,0,375,275)))

---

2차 삽질(opencv 이용). 알아낸점.

1. 그림이 아니라 자바스크립트로 선을 그음으로서 그림이 된다. 그러기때문에 캡쳐를 해야됨.

2. 그림 위치가 랜덤으로 나타난다........

# -*- encoding: cp949 -*-
import pyscreenshot as ImageGrab
import time,Image,pytesser
import cv2
import numpy as np

time.sleep(1)
min = [1000,1000]; max = [0,0]
im = ImageGrab.grab(bbox=(0,100,1000,860)).save('cap.png') #적당히 넓은 범위 캡쳐후 저장.
img = cv2.imread('cap.png',0)
for i in range(760):
    for j in range(1000):
        if img[i,j]!=0 and i<min[0]: 
            min[0]=i 
        if img[i,j]!=0 and j<min[1]:
            min[1]=j 
        if img[i,j]!=0 and i>max[0]:
            max[0]=i
        if img[i,j]!=0 and j>max[1]:
            max[1]=j
long = max[0]-min[0]; small = max[1]-min[1]; gap = long - small #이미지가 있는 위치 계산.
print min,max
cv2.imwrite('cap.png',img)
im = Image.open('cap.png').crop((min[1]-gap/2,min[0],max[1]+gap/2,max[0])).save('cap.png') #이미지 위치에 맞게 적당히 잘라냄.
img = cv2.imread('cap.png',0) #진한 흰색으로 보정
for i in range(max[0]-min[0]):
    for j in range(max[1]-min[1]):
        if img[i,j]!=0:
            img[i,j]=255
cv2.imwrite('cap.png',img) #cap1.png로 저장.
"""
for i in range(0,1,10): #조금씩 돌리면서 글자인식
    img = cv2.imread('cap1.png',0)
    rows,cols = img.shape
    M = cv2.getRotationMatrix2D((cols/2,rows/2),11,1)
    dst = cv2.warpAffine(img,M,(cols,rows))
    cv2.imwrite('cap2.png',dst)"""

트레이닝을 위한 숫자 사진.

나중에 필요할것 같은 코드.

decrypt.txt

encrypt.txt

삽질로 알아낸 점.

PIL모듈도 이미지처리를 하는 모듈이고 opencv도 이미지처리를 하는데 opencv가 조금 더 강력한것 같다. 위의 코드중

for i in range(0,1,10): #조금씩 돌리면서 글자인식

    img = cv2.imread('cap1.png',0)

    rows,cols = img.shape

    M = cv2.getRotationMatrix2D((cols/2,rows/2),11,1)

    dst = cv2.warpAffine(img,M,(cols,rows))

    cv2.imwrite('cap2.png',dst)

는 이미지를 회전하는 부분인데, pil모듈보다는 이미지가 조금 덜 깨진다. 원본 그림으로 돌려봤을때는 말그대로 사진을 회전한 느낌? 이것뿐만 아니라 opencv의 튜토리얼을 보면 강력하다.... 강력한만큼 이해해야 할 것이 많고, 이해하기 힘들다. 나중에 이 문제를 opencv로 다시 풀게 되면 그때 재작성 예정

2차삽질 : http://qkqhxla1.tistory.com/344