[React] bitmap to svg

멈춰!!

• 비트맵 이미지를 벡터로 꼭 바꿔야하는 사람들을 위한 코드
• 일반적으로는 브라우저에서 이 짓을 수행해야할 이유는 없다!!
• 아니 일반적으로는 이런 일을 할 이유가 없다.

사진

• 실사 이미지는 결과가 별로다. 정확도를 위해서는 어도비 일러스트레이터에서 작업하자.

• 일러스트는 괜찮은듯!!!

코드

import React, { ChangeEvent, useState } from 'react';
import { bitmap2vector } from 'bitmap2vector';
function App() {

  const [svgImage, setSvgImage] = useState('');
  const [imageSrc, setImageSrc] = useState('');
  const encodeFileToUint8Array = async (fileBlob : File) => {
    const buffer = await fileBlob.arrayBuffer();
    const bytes = new Uint8Array(buffer);
    return bytes;
  };
  const encodeFileToBase64 = (fileBlob : File) => {
    const reader = new FileReader();
    reader.readAsDataURL(fileBlob);
    return new Promise((resolve) => {
      reader.onload = () => {
        setImageSrc(reader.result!.toString());
        resolve(null);
      };
    });
  };

  const handleImageInput = async (e : ChangeEvent<HTMLInputElement>) => {
    const {files} = e.target;
    if(files == null){
      return;
    }
    const bytes = await encodeFileToUint8Array(files[0]);
    encodeFileToBase64(files[0]);
    const result = await bitmap2vector({ 
      input: bytes,

    });
    setSvgImage(result.content)
  }
  return (
    <>
    <input type="file" accept='image/*' onInput={handleImageInput}/>
    <img src={imageSrc} />
    <img src={`data:image/svg+xml;utf8,${svgImage}`} />
    </>
  );
}

export default App;