React 이미지 비율조정

Canvas에서 이미지를 출력하니 크기가 제각각 이였다 때문에 비율을 구해서 이미지를 resize하는 모듈을 찾아냈다.

참고링크
https://www.npmjs.com/package/react-image-file-resizer

const resizeFile = (file) =>
        new Promise((resolve) => {
            Resizer.imageFileResizer(
                file,
                300,
                300,
                'JPEG',
                100,
                0,
                (uri) => {
                    resolve(uri);
                },
                'base64'
            );
        });

async 함수

const onChange = async (event) => {
  try {
    const file = event.target.files[0];
    const image = await resizeFile(file);
    console.log(image);
  } catch (err) {
    console.log(err);
  }
};

맨위의 코드와 같이 함수를 만들어주면 base64의 형태로 입력한 이미지가 resize되어 사용할수 있게된다.이후 base64의 코드로 출력된 resize이미지를 url을 받기위해 아래와같은 함수를 사용해준다.

 function base64toFile(base_data, filename) {
        var arr = base_data.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);

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

        return new File([u8arr], filename, { type: mime });
    }

내 코드의 onChange 비동기 함수 부분은 아래와 같다.

onChange={async (e) => {
               e.preventDefault(); //모든 이벤트를 스탑하겠다
               let reader = new FileReader();
               let file = e.target.files[0];

               reader.onloadend = async () => {
               const image = await resizeFile(file);
               const imgfile = base64toFile(await image, 'newImg.jpg');

                setImg({
                        file: imgfile,
                        previewURL: await image,
                        });
                    };
               reader.readAsDataURL(file);

여기서 눈여겨 봐야할 부분은 먼저 예제와 같이 resize를 사용한 부분이고 두번째로
base64toFile을 선언한 부분이다 imgfile이라는 변수를 선언해서 값을 넣었기 때문에
결과적으로 imgfile에 최종 resize된 이미지가 저장이되고 이후 previewUrl 로 우리의
canvas에 그려지게된다 즉 imgfile에 서버로 가는 이미지가 담기는 것

base64toFile 참고링크
https://bcdragonfly.tistory.com/74