Base64 Encoded Image example

HTML5의 img 태그의 src 속성에는 Data URI를 사용하여 이미지를 출력할 수 있다.

Data URI를 사용하면 서버상의 이미지 경로가 아니라 이미지 데이터를 바로 지정할 수가 있는 특징이 있고, 이미지 데이터가 Base64포맷으로 인코딩되어 있는 경우에도 디코딩 절차를 거치지 않고 바로 사용할 수가 있다.

이 특징을 이용하면 jQuery AJAX 등을 이용하여 서버에 있는 이미지를 쉽게 클라이언트 측으로 가져올 수 있고 Base64 인코딩이 적용된 이미지 데이터를 HTML5에서 지원하는 Data URI 에 바로 적용하여 브라우저에 동적으로 이미지를 출력할 수 있다.'

다음은 서버측에서 이미지 파일을 Base64 포맷으로 인코딩하는 예이다.

이 코드에서 사용한 Base64 클래스는 Apache Commons Codec 라이브러리에 포함되어 있다.

Java 언어와 Apache Commons Codec 라이브러리를 이용한 Base64 인코딩의 예

String getImgString() {

File imgFile = new File("D:/test/sample.jpg");

if(!imgFile .exists()) return null;

long len = imgFile .length();

byte[] buf = new byte[(int)len];

FileInputStream fin = null;

try {

fin = new FileInputStream(imgFile );

fin.read(buf);

} catch (Exception e) {

e.printStackTrace();

}

byte[] base64encoded = Base64.encodeBase64(buf);

return new String(base64encoded);

}

클라이언트 측에서는 jQuery 의 AJAX 등을 이용하여 서버에서 실행되는 위의 메소드를 실행하여 JSON문자열로 리턴된 이미지 문자열 데이터를 아래처럼 사용하면 된다.

//alert('이미지 문자열 도착');

var base64EncImg = jsonObj.stImage.imgStr;

var datauri = 'data:image/jpeg;base64,'+base64EncImg;

$('#stImg').prop('src', datauri);

Programming