서버에서 16진수 형식으로 이미지를 줄 때

서버에서 16진수 형식의 바이너리 데이터로 이미지를 주고 있다.
첨엔 blob으로 친절하게 준다며..(요) 경로로 친절하게 준다며..(요) 16진수는 왜 나오는건데
하라면 해야지 뭐

👺(백엔드 개발자님) : "료미님 api 완성 되었어요 ~ "
💀(나) : 고생하셨어요 !! 이미지는 경로로 주시죠 ??
👺(백엔드 개발자님) : 아니요 ? 형식 잘 파악해서 넣어주세요 ~~
💀(나) : ????

완성된 API를 까보자

89504e470d0a1a0a0000000d494844520000003c0000003c0806000000b18ece ~~

까본 형식은 이러했다.

처음에 base64 형식인 줄 알고, 열심히 인코딩 함수를 만들었다.

가능할리가 ..

찾아보다가 서버에서 전달된 데이터가 16진수로 인코딩된 바이너리 데이터라는 것을 찾아냈다

16진수 형식의 이미지 바이너리 데이터 이미지 전환 과정

• 16진수 문자열을 바이너리로 변환 :
  Uint8Array를 사용해 16진수 문자열을 2자리씩 잘라서 각 16진수 값을 숫자로 변환하는 함수를 만들었다.

  const convertBinaryToUrl = (binary: string) => {
     const length = binary.length
     const bytes = new Uint8Array(length / 2)
         for (let i = 0; i < length; i += 2) {
            bytes[i / 2] = parseInt(binary.substr(i, 2), 16)
            }

• 바이너리 데이터를 Blob으로 변환:

Uint8Array로 변환된 바이너리 데이터를 Blob 객체로 감싸서 이미지의 데이터 타입(여기서는 'image/png')을 지정(때에 따라 jpg, jpeg도 가능하다). 이렇게 하면 브라우저가 이 데이터를 이미지 파일로 인식할 수 있게 된다.

  const arrayBuffer = bytes.buffer
        const blob = new Blob([arrayBuffer], { type: 'image/png' })
                return URL.createObjectURL(blob)
              }

• Blob URL 생성:
  URL.createObjectURL(blob)을 사용해 브라우저에서 사용 가능한 이미지 URL을 생성.

   const originBlobUrl = convertBinaryToUrl(origin_file.binary)
   const compareBlobUrl = convertBinaryToUrl(compare_file.binary)
   const resultBlobUrl = convertBinaryToUrl(result_file.binary)

이렇게 만들어진 URL은 HTML의 img 태그에 src 속성으로 설정할 수 있다.
나 같은 경우에는 상태로 관리하고 싶어서

setImages([
               {
                 label: '원본 이미지',
                 src: originBlobUrl,
                 alt: '원본 이미지',
               },
               {
                 label: '비교 이미지',
                 src: compareBlobUrl,
                 alt: '비교 이미지',
               },
               {
                 label: '결과 이미지',
                 src: resultBlobUrl,
                 alt: '결과 이미지',
               },
             ])

이런식으로 세팅하고 return 부분의 img src에 images.src를 map으로 돌려 3개의 이미지가 나오도록 했다.

				{images.map((image, index) => (
                      <Section key={index}>
                        <ImgLabel>{image.label}</ImgLabel>
                        <Img src={image.src}></Img>
                      </Section>
                    ))}

결과는 ?

잘 나온다. (보안상의 이유로 가림)