[JS] base64 img data를 img File 형태로 변경하기

 

 

예전 포스트에서 <input type="file"> 로 upload 받은 img File을 base64 형식의 data로 변환해보았는데 반대로 이번 포스트에선 base64 형식의 img data 를 다시 Blob 형태의 File로 다시 변환 해보았다.

 

준비된 base64 img data 

아래 귀여운 고양이 이미지와 이 고양이 이미지를 base64로 인코딩한 데이터를 가져왔다.

사진 및에 img tag src 속성값 "data:image/jpg; base64,/9j/4aaqsK ~~~ "  <- 요게 base64로 인코딩한 데이터 이다.  

귀여운 고양이

<img src="data:image/jpg;base64,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" />

 

코드 구현 

    // 고양이 img 
    const base64data = "data:image/jpg;base64,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"

    const convertBase64ImgToImgFile = (data, fileName) => {
      const arr = data.split(',') // arr = [data:image/jpg;base64 , /9j/4AAQSkZJRgABAQAAAQABA ...]
      const [mime, binaryData] = [arr[0].match(/:(.*?);/)[1], atob(arr[1])] // atob는 base64 data를 decode한다
      // mime = image/jpg
      // binrayData = image의 binary data (atob는 window 내장 객체로 base64 data를 decode하는 메소드이다.)
      let n = binaryData.length 
      let unit8Array = new Uint8Array(n); 
      // binrayData를 다루기 위해 unit8Array Typpedarray 이용 
      // 이미지 데이터는 각 픽셀단위로 0~255로 표현되기 때문에 unit8Array를 이용하는 게 효율적 
      while (n--) {
        unit8Array[n] = binaryData.charCodeAt(n) 
        // charCodeAt(n)은 array의 index=n 문자의 유니 코드 값을 반환한다.
      }
      return new File([unit8Array], fileName, { type: mime })
    }

    const imgFile = convertBase64ImgToImgFile(base64data)
    console.log('imgFile:',imgFile)

 

img File 객체 console.log로 찍어보기

위코드에서 변환한 imgFile을 console.log로 찍어보면 아래와 같이 나타난다.

imgFile: 옆에 File 로 찍힌걸 확인할 수 있다. File은 웹페이지에서 자바스크립트로 파일의 내용에 접근 할 수 있도록 한다고 한다. ( MDN 내용 ) 즉 실제 파일을 다루기 위해 정의된 객체정도로 이해하면 될 것 같다.

  

SIZE는 6464로 나타나는데 이는 파일의 용량이 6464Btye임을 나타낸다. 

type은 "image/jpg"로 되어있는데 이는 MIME type을 나타낸다 

 

그리고 Prototype: Blob도 하위에 확인되는데 File은 Blob을 확장한 개념이라고 한다. 그럼 여기서 Blob이란 무엇일까?

Blob 객체는 파일류의 불변하는 미가공 데이터를 나타낸다 ( MDN 내용 ) 라고 되어 있는데 말 그대로 실제 이미지나, 오디오, 동영상 과 같은 파일의 데이터이다. Blob은 텍스트와 이진데이터 형태로 읽을 수 있다. 참고로 Blob의 데이터를 이진데이터로 읽어 화면에 출력 하면 우리가 알수없는 문자들이 출력된다. 텍스트로 읽어오는 방법은 여러가지가 있는데 그중 하나가 FileReader.readAsDataURL(blob)이다 (https://developer.mozilla.org/ko/docs/Web/API/FileReader/readAsDataURL) 이 메서드를 사용할 시 base64 형태로 인코딩을 한다. 

 

참고

https://developer.mozilla.org/ko/docs/Web/API/File

File - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/API/atob

atob() - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array

Uint8Array - JavaScript | MDN

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

Blob - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/API/FileReader/readAsDataURL

FileReader.readAsDataURL() - Web API | MDN