[Javascript] base64 이미지 Data → File 객체로 변환

이는.. Smart Editor를 사용하면서 부딪히게 된 난항이다..

 

[Javascript] Naver SmartEditor 사용하기

 

SmartEditor 를 사용하여 글자를 입력할 때 입력한 글자 수를 표출하는 부분을 구현을 했는데,

SmartEditor는 이미지를 복사 붙여넣기가 가능한 것.

 

 

글자 수를 표출한 것은 사용자의 편리도 있지만, 해당 내용을 저장하는 DB 의 데이터 크기를 넘어서지 않게 하기 위함이었는데

이미지를 넣게되면 img 태그가 들어가버리면서 글자로 인지를 못해 글자수 크기 체크를 하지 못하게 되는 것이다.

 

하여, 해당 img 태그에 담긴 이미지 데이터를 실제 파일 객체로서의 사이즈를 알아야만 했다.

 

해당 부분을 살펴보니 이미지는 base64의 이미지 데이터였다.

 

img src base64 → File 객체 변환 코드

var img = document.querySelector("img"); // img 태그 객체

var bstr = atob(img.src.split(",")[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);

while(n--) {
	u8arr[n] = bstr.charCodeAt(n);
}

var file = new File([u8arr], "파일이름", {type:"mime"});

console.log(file);
console.log(file.size);

 

 

이렇게 해서 img 태그에 해당하는 파일 객체의 사이즈를 알게되었는데..

데이터 저장은 html 을 포함한 데이터를 통으로 byte로 저장하는데.. 태그를 포함한 html의 글자 갯수만 알면 되는거였다.

당장에는 필요없어졌지만, 나중에 꼭 필요한 코드가 될 것 같다.