[it공부기록] base64 to image feat. javascript, React

 

 

뭔가  날짜를 지정해서  날짜 사이에 검지된 이미지들을 압축파일로 다운로드 하고 싶다고 요청이 들어왔다.

 

챗gpt열심히 활용해서 기본 원리를 파악했다.

---

1. base64 데이터 리스트를 받아온다. 

2. atob로 변환

3. zip파일 생성

4. 다운로드 

---

대충 이런 느낌

 

준비물은 2개 
jszip

file-saver

 

참고로  typescript를 사용하고 있더라도 jszip은 그냥 npm i jszip하면 되는데

 

file-saver는 typescript용으로 설치해줘야한다.

const imageZip = (data: Array<any>) => {
    let zip = new JSZip();
    data.forEach((item: any) => {
      const bstr = atob(item.imageData);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);

      while (n > 0) {
        n -= 1;
        u8arr[n] = bstr.charCodeAt(n);
      }
      zip.file(item.name + '.png', u8arr);
    });
    zip
      .generateAsync({ type: 'blob' })
      .then((blob) => {
        FileSaver.saveAs(blob, zipfileTitle() + '.zip');
      })
      .catch((err) => {
        console.error(err);
      });
  };

데이터는 오브젝트 리스트로 받을것이리 반복문을 돌린다 .

 

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

이건 왜 하는지 몰랐는데  atob에 base64넣으면 string형태의 바이너리 데이터가 되는데

그것을 number형태로 바꿔줄 필요가 있다고 한다. 

 

Unit8Array는 8비트 정수 데이터인데  8비트 픽셀 데이터인 Image를 표현하기 적합하다고한다. 

 

 

 

 

react-datepicker라이브러리를 사용해서 캘린더를 넣고 iso스타일로 날짜를 전송하면 서버로부터 

 

이미지파일에 붙일 이름과 base64의 데이터가 들어오고 자동으로 다운로드 된다.