JavaScript Blob 데이터로 이미지 URL 생성해 표출하기

JavaScript Blob 데이터로 이미지 URL 생성해 표출하기

 

이번 포스팅은 Javascript에서 Blob 데이터를 받아 이미지 URL을 생성해

표출하는 방법을 알아보겠습니다.

 

우선 데이터베이스에는 BLOB 타입으로 이미지가 저장되어 있습니다.

Java VO 에서는 byte 배열 타입으로(toJson) 해당 데이터를 클라이언트에게 전달합니다.

private byte[] blob;

브라우저에서 받은 blob 데이터를 확인해 봅시다.

 

Blob 데이터 확인

콘솔로 데이터를 확인해보면 배열의 형태인 것을 보실 수 있습니다.

우선 이 배열을 8비트의 부호없는 정수 배열로 변환합니다. (Uint8Array)

그리고 이를 Blob 객체로 생성합니다. (Blob)

 

Blob 객체에 대해서는 아래의 Link를 참고하세요.

Link : https://developer.mozilla.org/ko/docs/Web/API/Blob

 

이제 파일과 흡사한 이 Blob 객체의 URL을 생성해 img 태그의 src로 입력해주면 됩니다.

그럼 코드를 보도록 하죠.

 

var bytes, blob;
bytes = new Uint8Array(data.blob);
blob = new Blob([bytes], {type:'image/bmp'});
data['imgSrc'] = URL.createObjectURL(blob);

함수의 일부 입니다.

위에서 말씀드린데로 8비트 부호 없는 정수 배열로 변환한 후

Blob 객체를 생성하고, 그 객체의 URL을 생성해 전달받은 data Object의 imgSrc 로 추가 합니다.

이제 이 imgSrc를 img 태그의 src 값으로 넣어주시면 이미지가 표출되게 됩니다.

 

그럼 위의 코드에서 bytes와 blob을 콘솔에서 확인해보도록 하겠습니다.

 

byte변수와 blob변수

이렇게 생성된 Blob 객체의 URL은 임의의 값으로 아래와 같은 값을 같습니다.

blob:http://localhost:8080/996b4e64-c213-47f9-8763-067d11633601

 

blob의 이미지 표출