Computer Vision

[이미지 전처리]. image to base64 , base64 to image 변환하는 방법

Acdong 2020. 11. 25. 14:26
728x90

image to base64 , base64 to image 변환하는 방법

본래 html 에 있는 이미지들의 src를 보면 대부분 로컬주소가 들어있거나 url 주소가 들어있다.

하지만 우리는 사용자가 업로드한 이미지에 대한 처리를 해줘야 할 상황이 생기고 

사용자가 업로드한 이미지를 살펴보니까, base64의 형태로 <img src> 에 저장되어있더라.

 


여기서 간단히 base64에 대해서 알아보자.

Base64 란 8비트 2진 데이터를 (플랫폼의) 문자 코드에 영향을 받지 않는
공통 ASCII 영역의 문자들로만 이루어진 일련의 문자열로 바꾸는 인코딩 방식을 가리키는 개념이다.

Base 64는 데이터를 64진법 으로 나타낸다.

이를 0부터 63까지 ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/ 으로 나타낸다.

 

즉 이미지파일의 데이터가 문자열로 저장되어있는 형식이라고 보면된다.

이미지를 숫자로 풀면 3차원 nparray 행렬 데이터가 되는 것 처럼 말이다.

 

예를 들어보면b'UklGRrpkAABXRUJQVlA4IK5kAADQ4QCdASpQAbwAPlEmkEWjoiGSGq10OAUEtDLW5Vuf+I/NL+h+pv2z96f4X+8f5j/Zf4X/59vH+u/wX7Vf4/nzc3/qf+e/wP+q/3/7//QR+TfzT+9/2//Ff67/E//3/lfCz6P/o/6L/HdaltP+G/2H+T9wX80/p/+h/uX+c/2X7//+b4//k/9B/hv9V6p/2D/G/6r/I/uH/jfsC/m39Z/zP+H/y/+e/wf///6n4N/y/2W/1Xq2/A/6//tf433Bfzz+uf7//Bfv58c/7D/wf7D/Z/+T2B/q3+e/6v+i/1P/m/230L/nH9c/2n99/0H/X/f//zfeX/9/eZ/cj/ve6r/AP3erxcO+kHlX9gP3j6hQz+NfHr7mf43SH2A

.... 문자열이(실제로는 훨씬길다.)

 

위에 이미지인 것이다.


이미지를 인코딩하는 방법은 간단하다.

이미지를 읽어들어와서 base64 패키지의 인코딩을 사용하면된다.

import base64
with open('./image.jpg', 'rb') as img:
    base64_string1 = base64.b64encode(img.read())
import cv2
import base64
img = cv2.imread('test_image.jpg')
jpg_img = cv2.imencode('.jpg', img)
b64_string = base64.b64encode(jpg_img[1]).decode('utf-8')

이것을 이제 우리가 사용하는 npArray 또는 img 파일의 형식으로 디코딩하는 방법을 알아보자.

import base64
import io
from PIL import Image
import cv2
       # Take in base64 string and return cv image
def stringToRGB(base64_string):
    imgdata = base64.b64decode(base64_string)
    dataBytesIO = io.BytesIO(imgdata)
    image = Image.open(dataBytesIO)
    return cv2.cvtColor(np.array(image), cv2.COLOR_BGR2RGB)

디코딩 방식또한 패키지를 이용하면 간단하게 할 수 있다.

 

이 함수는 cv2 를 통해서 np.array 형식으로 반환하는 것이고.

반환하기전 image 상태는 말그대로 img 형식의 데이터이다. 

 

 

여기서 주의해야할 점이 있는 데 html에 업로드 되어있는 <img src> 태그 값은

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQoAAACPCAYAAAACwZUWAAAAA

이런식으로 시작하는데 여기서 디코딩할때

 

data:image/png;base64, 이 부분은 지우고 진행해야한다.

어떻게 보면 상식적인건데 이거 때문에 한참을 고생했다..

UnidentifiedImageError cannot identify image file <_io.BytesIO object

삭제하지 않으면 base64로 인식을 못해서 이런 에러가 계속뜸...

 

알아두자 iVBORw0KGgoAAAANSUhE 부터가 base64 형식의 시작이다.

반응형