개발 Q&A

제목 JS 이미지 리사이징 라이브러리 compressorjs
카테고리 JavaScript
글쓴이 주말생각 작성시각 2022/01/11 11:55:49
댓글 : 3 추천 : 0 스크랩 : 0 조회수 : 7735   RSS

https://github.com/fengyuanchen/compressorjs

 

위의 라이브러리는 제목처럼 이미지 리사이징 라이브러리입니다. 해당 깃허브에 가서 이리저리해보는데, 백단에서 생php 또는 코드이그나이터로 어떻게 받아야할지 모르겠습니다. 기존의 파일업로드는 코드이그나이터의 파일업로드 라이브러리를 사용했습니다만, 이거는 받는 것 확인조차 안되네요.

 

또하나 질문드릴 것이 해당 라이브러리에서는 이미지를 리사이징 후에 FormData로 서버에 전송해주는데, 이미지 파일 이외에도 사용자가 input text에 입력한 문자열도 같이 받고 싶으면, 어떻게 해당 부분을 추가하면 좋을까요?

 

개발환경은 코드이그나이터 3.x입니다.

 

감사합니다.

 다음글 a태그가 스스로 새로 생성됩니다;;; (5)
 이전글 스크래핑에 대해서 (1)

댓글

한대승(불의회상) / 2022/01/12 10:38:54 / 추천 0
<input type="file" id="file" name="myfile" accept="image/*">

name을 추가한후 upload 라이브러리를 통해 받으면 될것 같습니다.

추가 텍스트는 <input type="text" ... > 추가하면 되지 않을까요?

주말생각 / 2022/01/12 13:42:48 / 추천 0

한대승님 답변감사합니다.

네, 현재

<form>

<input type = "file" name="fileName" />
<input type = "text" name="textNam" />

<input type="submit" value="저장" />

</form>

대락 이러한 형태의 폼입니다. 그러나 제가 본문에 사용한 라이브러리를 사용하면 버튼을 클릭한 시점에서 이미지 리사이징을 하고 ajax로 서버에 데이터를 전송하는데, 전송이 되었다고 통신 이후에 확인은 되는데, upload라이브러리로 어떻게 받아야 할지 모르겠습니다. 기존에 첨부한 파일에서 리사이징된 파일은 form에 있는 file 타임의 데이터가 아니거든요. 그래서 현재 form 안에 히든 타입의 input을 하나 생성하여 파일의 base64로 인코딩하여 서버에 전달합니다.

그런데 base64로 변환하면 서버 트래픽 부담이 증가될 수 있다고 하는데, 기존 일반적인 파일 전송대비 어느 정도인지 알고 계시거나 참고할 만한 자료가 있을까요?

한대승(불의회상) / 2022/01/13 15:31:25 / 추천 0

@주말생각 상황에 따라 다르지만 원본(바이너리)에 비해 대략 33~36%의 오버헤드가 발생합니다.

https://ko.wikitrev.com/wiki/base64