Home
✔ 뷰어로 보기
코드
2018.05.06 22:52

클라이언트단에서 이미지 리사이징

네모
조회 수 1154 추천 수 0 댓글 6
?

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
Extra Form
라이선스 기타(따로 작성)

용량이 큰 이미지를 업로드 하게 되면, 트래픽 문제, 저장공간 문제 등... 불편한게 많은데요.


업로더 입장에서는 일일히 사이즈 줄이기 귀찮고, 운영자 입장에서는 서버에서 처리하기에는 서버 자원이 부담될 수 있죠.




그래서 만들었습니다! (미완성이지만)


클라이언트단에서 자동으로 이미지 크기를 줄여주는 소스입니다.


참고로 파일 선택을 완료하면 DataURI 값을 반환합니다. RX/XE 에서 이걸 어찌 처리해야 하나 고민하다가 귀찮아서 그냥 올립니다ㅋ


누군가 RXE용 애드온으로 완성시켜 주시길...!







첫번째 이미지는 원본이고, 두번째 이미지는 리사이징 된 결과물입니다.


용량은 1/10으로 줄었고, 이미지 크기는 가로최대 960px, 세로최대 720px 으로 적당하게 리사이징 되었습니다.


아, 참고로.. 이미지 출처는 자유게시판의 @제르님 게시글입니다.




누군가 애드온으로 만들어주시리라 믿고 있겠습니다.


다운로드는 resize.zip 에서 합시다. 이만!

Who's 네모

profile

인스타그램 : http://instg.me/nemo_9l

Atachment
첨부 '3'
Facebook Twitter Google Pinterest
위로 아래로 댓글로 가기 인쇄 첨부
에디터 선택하기
?
Comments '6'
  • profile
    제르엘 2018.05.07 00:02
    완성은 아직 덜 됐지만 어쨌든 능력자 네모사마...! 그나저나 저 용산행 ITX-청춘 역명판을 여기서 또 보게 될 줄이야...
    댓글
  • profile
    NoYeah 2018.05.07 01:26
    리사이징 애드온이 있었던거 같은데 충돌이 많아서..

    갓네모님이 만들어줘여~
    댓글
  • profile
    제르엘 2018.05.28 00:44

    어 잠깐만요 노트8 조리개값이 f/2.4였나...? f/1.7일텐데... 삼성이 가변 조리개를 탑재해놓고 홍보하지 않은 건가

    댓글
  • profile
    이니스프리 2019.08.03 20:36

    네모 님~ 안녕하세요?

    제주도 여행은 잘 다녀오셨나요? ^^


    올려주신 소스를 보면서 공부하고 있는데요~

    var dataurl = canvas.toDataURL("image/jpeg"); 이 부분 관련해서 여쭤볼게요!


    구글링해보니 canvas.toDataURL 메소드가 GIF를 지원하지 않는다고 하던데요~

    https://stackoverflow.com/questions/14907122/export-canvas-as-gif-image


    var dataurl = canvas.toDataURL("image/gif"); 라고 변경해도

    GIF 파일을 업로드하면 PNG로 저장이 되면서 움짤이 안 되던데요 ㅠㅠ

    혹시 자바스크립트에서 animated GIF 파일도 리사이징을 할 수 있는 다른 방법이 있는지 여쭤봅니다!


    그럼 즐거운 주말 되세요~

    항상 감사드립니다 ^-^

    댓글
  • profile
    네모 2019.08.04 21:33
    안녕하세요 :)
    제주도는 내일 출발하네요. 태풍 때문에 즐길 수 있을지는 잘 모르겠지만, 그대로 두근두근합니다!

    HTML5의 canvas는 단어에서 유추할 수 있듯, 종이 캔버스에 그림을 그리는 것과 다를바가 없습니다.
    종이에 움직이는 그림을 그릴 수 없는 것은 당연하니, 캔버스에 GIF를 올리더라도 GIF의 첫 프레임만 캔버스에 기록되겠죠.
    (캔버스를 통해 애니메이션을 구현하는 것은 보통 캔버스에 추가로 그림을 더 그리거나, 지우는 방식으로 구현하지요. 결과적으로 여러 장면이 남는게 아니라 하나의 장면만이 캔버스에 남으니 애니메이션을 기록하는 기능은 없다고 보아야합니다.)
    DataURL로 변환을 해도 마찬가지로 첫 프레임만이 기록될거구요.
    (toDataURL 메소드는 현재 캔버스에 그려진 장면을 DURL로 변환하는 메소드니 당연하지요.)

    GIF 이미지를 리사이즈 하려면, 해당 GIF에 있는 프레임들을 추출해서 리사이즈 한 뒤, 다시 애니메이션 GIF로 합치는 방법이 떠오르네요.

    각 프레임을 추출하는 라이브러리
    https://github.com/benwiley4000/gif-frames

    이미지를 Animated GIF으로 합치는 라이브러리
    https://jnordberg.github.io/gif.js/

    여행준비 하느라 시간이 많지 않아 원리는 확인해보지 못했습니다만,
    예상하기로는 직접 바이너리를 분해하거나 짜올리는게 아닐까 싶네요. 브라우저 API에 GIF를 다루는 함수를 본 기억이 없으니 그렇지 않을까... 싶네요.

    조금 더 검색해 보시면 리사이즈까지 해주는 라이브러리가 있을수도 있습니다.
    이 부분은 확인이 안되어서.. :)

    이니스프리님! 즐거운 주말 보내시구요!
    일요일 마무리 잘 하시고, 내일부터 또 활기찬 일주일 시작하시길 기원하겠습니다!

    그럼 이만 ㄴㅇㄹ!
    댓글
  • profile
    이니스프리 2019.08.05 00:41

    앗 말씀하신 '다음주' 월요일에 출발하신다는 것이 바로 오늘(8/5)이었군요 ㅎㄷㄷ

    저는 지난주 월요일에 출발하시는 것으로 착각했네요~

    여행 앞두고 준비하느라 바쁘실텐데 상세한 답변을 달아주셔서 감사합니다!!


    구글링을 해보니 프레임을 추출해서 리사이즈 한 후 다시 합치는 것도 쉬운 일이 아닌 것 같네요.

    파이썬에서도 Pillow 라이브러리만으로 단순히 해결되는 문제가 아니더군요 ㄷㄷ

    말씀해주신 gif-frames와 gif.js의 깃헙에 들어가서 소스를 보기는 했는데

    아직 자바스크립트 실력이 부족해서 제가 소스를 바로 이해할 수 있는 수준은 아닌 것 같네요 ㅠㅠ

    이 플러그인을 이용해서 좀 더 만들어보겠습니다~


    그럼 조심해서 여행 잘 다녀오시구요~

    부디 북상하는 태풍이 제주도에서 멀리 빗겨가서 도쿄로 향하기를 진심으로 기원합니다!

    모처럼 휴가를 내서 제주도에 가시는데 즐겁고 뜻깊은 시간이 되셨으면 좋겠습니다 ^-^

    번번이 감사합니다!!

    댓글
  1. No Image 05Jun
    by gimmepoint
    2018/06/05 by gimmepoint
    in 코드
    Views 722  Replies 9

    매우 특이한 버그

  2. No Image 12May
    by gimmepoint
    2018/05/12 by gimmepoint
    in 코드
    Views 529 

    내가 만든 함수 모음집 2

  3. No Image 11May
    by gimmepoint
    2018/05/11 by gimmepoint
    in 코드
    Views 621 

    내가 만든 사칙연산 계산기

  4. No Image 08May
    by gimmepoint
    2018/05/08 by gimmepoint
    in 코드
    Views 522  Replies 4

    내가 만든 함수 모음집

  5. 06May
    by 네모
    2018/05/06 by 네모
    in 코드
    Views 1154  Replies 6

    클라이언트단에서 이미지 리사이징

  6. No Image 05May
    by 네모
    2018/05/05 by 네모
    in 코드
    Views 672  Replies 1

    HEX를 RGB로, RGB를 HEX로 바꾸는 PHP 코드

  7. No Image 24Apr
    by gimmepoint
    2018/04/24 by gimmepoint
    in 코드
    Views 642  Replies 2

    c 이진트리 전,중,후위 알고리즘

  8. No Image 21Apr
    by gimmepoint
    2018/04/21 by gimmepoint
    in 코드
    Views 730  Replies 4

    html 초보가 만든 자소서

  9. No Image 21Apr
    by 네모
    2018/04/21 by 네모
    in 코드
    Views 661  Replies 18

    Hello, World!를 출력해보자

  10. No Image 21Apr
    by 제르엘
    2018/04/21 by 제르엘
    in 코드
    Views 567  Replies 6

    아주 간단한 기초 C++

  11. No Image 20Apr
    by gimmepoint
    2018/04/20 by gimmepoint
    in 코드
    Views 565 

    미완성 받아쓰기 (C)

  12. No Image 18Feb
    by ProjectSE
    2018/02/18 by ProjectSE
    in 코드
    Views 691  Replies 1

    Cmd 에서 서비스 시작 / 종료하기

  13. No Image 06Feb
    by humit
    2018/02/06 by humit
    in 코드
    Views 1092  Replies 1

    CMD로 로컬 연결 고정 IP 설정하기

  14. No Image 28Jan
    by humit
    2018/01/28 by humit
    in 코드
    Views 1221  Replies 5

    컴퓨터의 uuid 얻기

  15. 26Jan
    by Hanam09
    2018/01/26 by Hanam09
    in 코드
    Views 1076  Replies 11

    유튜브에 약간의 기능을 추가 해주는 크롬 확장 프로그램.

  16. No Image 14Jan
    by NoYeah
    2018/01/14 by NoYeah
    in 코드
    Views 1028  Replies 1

    사이트 서버 이전 (또는 미러링 사이트 구축) 쉽게하는 스크립트

  17. No Image 26Nov
    by 이니스프리
    2017/11/26 by 이니스프리
    in 코드
    Views 3561  Replies 9

    새 글 자동 댓글 스크립트 (AutoHotkey)

  18. No Image 19Nov
    by 이니스프리
    2017/11/19 by 이니스프리
    in 코드
    Views 2516  Replies 4

    파이썬을 이용한 텔레그램 새 글 알림 (허접합니다)

  19. No Image 10Oct
    by 네모
    2017/10/10 by 네모
    in 코드
    Views 870  Replies 4

    브라우저 언어에 따라 다른 폴더를 사용하는 PHP 코드

  20. No Image 16Sep
    by NoYeah
    2017/09/16 by NoYeah
    in 코드
    Views 750  Replies 5

    Git 저장소에서 자동으로 받아 업데이트하는 쉘 스크립트

쓰기
Board Pagination Prev 1 2 3 4 Next
/ 4