[ Base64 ] 이미지 atob() btoa() 깨지는 문제

[ 개발환경 ]
WAS : Tomcat
lang : Java, JS
Template : JSP
DB : MySQL

 

문제

웹사이트 프로젝트를 진행하던 중 이미지를 binary 코드로 인코딩하여 DB에 저장하고

필요한 경우 추출하여 디코딩 하는 기능을 개발하게 되었다.

테스트중 샘플 이미지를 btoa()로 인코딩하여 DB에 저장하고 저장된 값을

img태그의 src에 입력했을때 이미지가 깨지는 현상이 발생했다. 

 

반면 직접 인코딩된 값을 DB를 거치지 않고 img태그에 직접 할당했을 때는 정상적으로 이미지가 출력되었다.

 

왼쪽의 이미지가 오른쪽처럼 깨져서 나옴

 

해결방법

한참을 해맨 결과 테스트를 위하여 직접 인코딩 된 값을 Workbench를 통해 DB에 입력했던 것이 문제였다는 것을

깨달았다...

DB에 내가 직접 Ctrl+C , Ctrl+V  하는 것과  프로그램(Java)에서 바로 넘기는 것에 차이가 당연히 없을 것이라 생각했고 실제로 텍스트 비교 결과  틀린 것도 없었다.

하지만 정확한 이유를 아직  밝혀내지는 못했지만 Workbench를 통해 입력할 때 일부 특수문자나 기호가 누락, 혹은 숨겨진 UNICODE 문자가 꺠져서 이미지가 일부만 출력된 것으로 추측된다.

 

정리하자면

btoa() 소스 DB에 직접저장 -> 오류

btoa() 소스 프로그램에서 저장 -> 정상 인것이다.

 

따라서  btoa()  >>>  Java에서 DB저장 >>> 저장된값 출력  >>>  atob() >>> src속성 set  하면 해결된다