리액트 이미지 변경 시 width, height 값 확인

purpose : 이미 선택된 이미지, 미리보기로 보여주고 있는 이미지를 radio버튼을 누를 때마다, 각 radio 버튼의 value에 지정된 width, height 값이 아닌 경우 alert을 띄어주고 미리보기, 파일선택을 초기화 해주어야한다.

즉 radio버튼 값이 변경될 경우 미리보기로 보여주고 있는 width, height값을 검사하여 pass,fail을 결정한다.

이미지 미리보기는 base64로 인코딩되어서 보여주고 있기때문에 Image 객체를 통해

base64 image to image로 변환 후

실제 image의 width, height 값을 얻어낸 다음

비교 함수에 width, heigth을 파라미터로 넣어준다.

false인 경우 값들을 모두 초기화 시켜주고 alert을 띄어준다.

useEffect(() => {
Base64ToImage(previewImg,function(img) {
let isOk = checkDimension(img.naturalWidth, img.naturalHeight);
if(!isOk) {
            fileInput.current.value = ''; //선택된 input값 초기화
            getValue(null); //부모컴포넌트에서 props로 내려준 값 초기화
            setPreviewImg(''); // 미리보기 이미지(base64) 초기화
            alert(
                '이미지 사이즈가 달라요',
            );
        }
    });
}, [location, previewImg]);

const Base64ToImage = (base64img, callback) => {
    let img = new Image();
    img.onload = function () {
        callback(img);
    };
    img.src = base64img;
};

const checkDimension = (width, height) => {
        if (type == 'tei') {
            if (width != 500) {
                return false;
            }
            if (height != 300) {
                return false;
            }
        }

        if (type == 'buzz') {
            if (width != 250) {
                return false;
            }
            if (height != 60) {
                return false;
            }
        }

        return true;
    };

return (
<>
		<input type='file'ref={fileInput} onChange={(e) => selectImage(e)} accept={'png, jpg'}
                />
</>
)

이미지를 읽어 올 때 base64변환 및 이미지 width, height 값 체크

const selectImage = (e) => {
        let reader = new FileReader(); // FileReader API로 이미지 인식
        let fileSize = e.target.files[0]?.size;
        const max = maxSize * 1024 * 1024;

        if (fileSize > max) {
            alert(maxSize + 'MB까지 등록 가능합니다.');
            return;
        }
        if (e.target.files[0]) {
            //readAsDataURL메서드는, 컨텐츠를 특정 Blob이나 File에서 읽어오는 역할을 하게되고, 읽어오는 read가 종료되는 경우에,
            // readyState의 상태가 DONE이 되고,
            // loadend이벤트가 트리거 되면서, base64 인코딩된 스트링 데이터가 result에 담겨지게 된다.
            reader.readAsDataURL(e.target.files[0]);
            return new Promise((resolve) => {
                reader.onload = () => {
                    let img = new Image();
                    img.src = reader.result;
                    img.onload = function (e) {
                        let width = e?.target?.width;
                        let heigth = e?.target?.height;
                        let isOk = checkDimension(width, heigth);
                        if (!isOk) {
                            fileInput.current.value = '';
                            alert(
                                '이미지 비율이 맞지 않습니다. 확인 후 다시 시도해주세요.',
                            );
                            return;
                        }
                        setPreviewImg(reader.result);
                        onChangeImage(reader.result);
                        resolve();
                    };
                };
            });
        }
    };