자유게시판

client-side 이미지 리사이즈 생각보단 화질이

2024.06.28 08:28
159
0

좋지가 않네요.

 

너비 기준 1200정도로하면 스크린샷의 글자가 너무 뭉개지는 것 같고, 2000~3000정도가 원본을 크게 해치지 않으면서 이미지 용량은 많이 줄일 수 있을 것 같습니다.

 

4k 스크린샷 3MB, 7MB 이미지를 2000px로 리사이즈하니 1MB 내외로 줄어듭니다.

절적한 수치를 잘 잡아야 할 것 같네요.

 

사진 같은건 별로 티가 나지 않는데 2000px 이하는 작은 글자들이 있는  스크린샷은 화질저하가 아쉬운 수준이네요.

 

 

filepond를 사용했는데 추천해주실만한 라이브러리가 있을까요? 클라이언트에서 리사이즈되고 개발이 중단되지 않은 수준의 라이브러리 찾기가 힘드네요. 

 

ck에디터 5 버전으로 에디터 스킨 만들어보고있는데 파일업로드에 이미지 리사이즈 기능 붙여보려다 시간을 많이 뺏기고 있네요.  

kkigomi Lv. 2

댓글 2

  • 2024.06.28 11:40 #1829371
    1. input[type=file]에 change 이벤트 리스너 달아놓고
    2. 선택된 파일이 이미지인 경우 FileReader API로 파일 읽어서
    3. canvas에 읽은 파일 이미지를 렌더링 한 뒤 사이즈 조정해서 blob으로 내보내고
    4. 그 blob을 DataTransfer 객체 등등을 활용해 input[type=file] 에 집어넣고
    5. 그 뒤로 기존에 라이믹스가 구현해둔 업로드 기능을 그대로 활용하면
    6. TADA!
  • 2024.06.28 13:17 #1829395

    리사이즈는 부가적인 것일 뿐이고, 파일 validation이나 UI를 제공해주는 라이브러리가 필요해서요.

    (라이믹스의 기본 jquery file upload를 제외하고요. 그누보드에도 붙일 거라서...)