구현내용

• heic 이미지를 webp 확장자로 변환 후 업로드하기
• 이미지 리사이징 후 업로드하기

heic2any

미주84의 도움으로 heic 이미지 업로드시 글이 등록되지 않는 버그를 발견했다. heic는 스마트폰으로 촬영한 사진의 확장자다. 여행 커뮤니티에서 스마트폰 사진을 업로드 하지 못한다....? 그건 마치 단무지 없는 김밥, 팥 없는 찐빵 같은 거였다. 최적화 작업하기도 촉박했지만 당장 기능 개발에 착수했다.

  const uploadCoverImg = () => {
    file = coverRef.current.files[0];
    const reader = new FileReader();
    
    if (file.type === "image/heic" || file.type === "image/HEIC") {
      let blob = coverRef.current.files[0];
      heic2any({ blob, toType: "image/webp" }).then(function (resultBlob: any) {
        file = new File([resultBlob], file.name.split(".")[0] + ".webp", {
          type: "image/webp",
          lastModified: new Date().getTime(),
        });
        reader.readAsDataURL(file);
        reader.onloadend = () => {
          setUploadCover(reader.result as SetStateAction<string | undefined>);
          setModalOpen(false);
        };
      });
    }

    if (file.type !== "image/heic" || file.type !== "image/HEIC") {
        reader.readAsDataURL(file);
        reader.onloadend = () => {
          setUploadCover(reader.result as SetStateAction<string | undefined>);
          setModalOpen(false);
        };
    }
  };

📌 heic 이미지 파일을 jpeg로 변환하기 참조

Webp는 jpg, png에 비해 파일 크기가 최소 25%~30% 가량 작고, 기존 형식에 비해 로딩 속도도 빠르고 모바일 데이터도 적게 소모하므로 해당 형식으로 변환했다.

그러나 변환에 성공했음에도 불구하고 여전히 게시글이 등록되지 않았다. 에러 메시지를 보니 이번엔 용량이 문제였다. 형식을 webp로 변환했다 한들, heic2any 라이브러리가 파일 크기까지 획기적으로 감소시켜주는 것 같지는 않았다.

browser-image-compression

  const uploadCoverImg = () => {
    file = coverRef.current.files[0];
    const options = {
      maxSizeMB: 1,
      maxWidthOrHeight: 2520,
    };
    const reader = new FileReader();
    
    const resizeFile = async () => {
      try {
        const compressedFile = await imageCompression(file, options);
        reader.readAsDataURL(compressedFile);
        reader.onloadend = () => {
          setUploadCover(reader.result as SetStateAction<string | undefined>);
          setModalOpen(false);
        };
      } catch (error) {
        console.log(error);
      }
    };

    if (file.type === "image/heic" || file.type === "image/HEIC") {
      let blob = coverRef.current.files[0];
      heic2any({ blob, toType: "image/webp" }).then(function (resultBlob: any) {
        file = new File([resultBlob], file.name.split(".")[0] + ".webp", {
          type: "image/webp",
          lastModified: new Date().getTime(),
        });
        resizeFile();
      });
    }

    if (file.type !== "image/heic" || file.type !== "image/HEIC") {
      resizeFile();
    }
  };

📌 Browser Image Compression 라이브러리에서 이미지를 압축하는 법 참조

이번에도 라이브러리를 사용해서 손쉽게 해결했고 heic 이미지가 업로드 되는 것까지 확인했다. 그러나 1048487 바이트를 초과하는 파일은 용량 초과로 업로드 되지 않았다.

  if (uploadCover?.length > 1048487) {
    setUploadCover("");
    Swal.fire({
      title: `<p style="font-size: 20px;">이미지 용량을 초과했습니다.</p>`,
      icon: "error",
    }).then((result) => {
      if (result.isConfirmed) {
        setModalOpen(true);
      }
    });
  }

일단은 용량 초과시 모달을 반환하는 방식으로 예외 처리를 했다. 요즘 스마트폰 화질을 생각하면 최대용량이 최대용량이 아닌지라 그 이상의 크기를 업로드 하는 방법을 고민해봐야겠다.