javascript - base64Image 변환하기

base64Image 변환하기

base64String

• Base64는 인코딩 방식 중 하나로, 이진 데이터를 문자열로 변환하는 과정을 말합니다. 이진 데이터는 0과 1로 이루어진 이진수로 표현되는 데이터로, 문자열로 표현하기 어렵기 때문에 Base64 인코딩을 사용하여 문자열로 변환합니다.
• Base64는 이진 데이터를 일종의 알파벳으로 이루어진 문자열로 변환합니다. 이 문자열은 인코딩과 디코딩을 거쳐 다시 이진 데이터로 변환할 수 있습니다. Base64는 MIME(Multipurpose Internet Mail Extensions) 표준에서 이메일을 통해 전송되는 이진 데이터를 안전하게 인코딩하기 위해 사용됩니다.
• Base64는 네트워크에서 이진 데이터를 안전하게 전송하는 데 사용되는 바이너리 인코딩 알고리즘으로 폭넓게 활용되고 있으며, 예를 들어 이미지나 동영상 파일, 소리 파일 등 바이너리 데이터를 문자열 형태로 변환하여 안전하게 저장하거나 전송하게 할 수 있습니다.
• Base64는 다양한 프로그래밍 언어에서 적용이 가능하며, 대부분의 사람들이 사용하는 이미지 사이트에 이미지 업로드 시 base64 형태로 인코딩하여 업로드 하는 경우가 많습니다. 이를 활용하여, 서버에서 이미지 데이터를 전송하지 않고도 base64 인코딩된 문자열 형태로 브라우저에 이미지를 표시할 수 있습니다.

base64String을 이용하여 img 렌더링 하기

• img 태그의 src 속성에 추가 : data:image/png;base64, + base64String

src={`data:image/png;base64,${base64String}`}

base64String을 File 객체로 변환하기

export const b64toFile = (b64Data: string, filename: string) => {
  const bstr = atob(b64Data);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);

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

  return new File([u8arr], filename, { type: 'image/png' });
};

File 객체를 이용하여 img 렌더링 하기

• src를 img 태그 src 속성에 넣어준다.

const src = window.URL.createObjectURL(File객체);

base64String을 Blob 객체로 변환하기

export const b64toBlob = (b64Data: string, contentType = 'image/png', sliceSize = 512) => {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i += 1) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  const blob = new Blob(byteArrays, { type: contentType });
  return blob;
};

Blob 객체를 이용하여 img 렌더링 하기

• src를 img 태그 src 속성에 넣어준다.

const src = window.URL.createObjectURL(Blob객체);