조회 수 1155 추천 수 0 댓글 6
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

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


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




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


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


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


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







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


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


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




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


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

  • 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. 잘못 쓰면 컴퓨터가 날아가는 코드

    Date2018.07.08 Category코드 By제르엘 Views1022
    Read More
  2. 매우 특이한 버그

    Date2018.06.05 Category코드 Bytitle: 대한민국 국기gimmepoint Views729
    Read More
  3. 내가 만든 merge sort

    Date2018.05.17 Bytitle: 대한민국 국기gimmepoint Views530
    Read More
  4. 내가 만든 함수 모음집 2

    Date2018.05.12 Category코드 Bytitle: 대한민국 국기gimmepoint Views534
    Read More
  5. 내가 만든 사칙연산 계산기

    Date2018.05.11 Category코드 Bytitle: 대한민국 국기gimmepoint Views645
    Read More
  6. 내가 만든 함수 모음집

    Date2018.05.08 Category코드 Bytitle: 대한민국 국기gimmepoint Views526
    Read More
  7. 클라이언트단에서 이미지 리사이징

    Date2018.05.06 Category코드 By네모 Views1155
    Read More
  8. HEX를 RGB로, RGB를 HEX로 바꾸는 PHP 코드

    Date2018.05.05 Category코드 By네모 Views678
    Read More
  9. c 이진트리 전,중,후위 알고리즘

    Date2018.04.24 Category코드 Bytitle: 대한민국 국기gimmepoint Views644
    Read More
  10. html 초보가 만든 자소서

    Date2018.04.21 Category코드 Bytitle: 대한민국 국기gimmepoint Views739
    Read More
  11. Hello, World!를 출력해보자

    Date2018.04.21 Category코드 By네모 Views661
    Read More
  12. 아주 간단한 기초 C++

    Date2018.04.21 Category코드 By제르엘 Views570
    Read More
  13. 미완성 받아쓰기 (C)

    Date2018.04.20 Category코드 Bytitle: 대한민국 국기gimmepoint Views578
    Read More
  14. Cmd 에서 서비스 시작 / 종료하기

    Date2018.02.18 Category코드 ByProjectSE Views698
    Read More
  15. CMD로 로컬 연결 고정 IP 설정하기

    Date2018.02.06 Category코드 Bytitle: 황금 서버 (30일)humit Views1092
    Read More
  16. 컴퓨터의 uuid 얻기

    Date2018.01.28 Category코드 Bytitle: 황금 서버 (30일)humit Views1239
    Read More
  17. 유튜브에 약간의 기능을 추가 해주는 크롬 확장 프로그램.

    Date2018.01.26 Category코드 ByHanam09 Views1078
    Read More
  18. 사이트 서버 이전 (또는 미러링 사이트 구축) 쉽게하는 스크립트

    Date2018.01.14 Category코드 ByNoYeah Views1042
    Read More
  19. 새 글 자동 댓글 스크립트 (AutoHotkey)

    Date2017.11.26 Category코드 By이니스프리 Views3564
    Read More
  20. 파이썬을 이용한 텔레그램 새 글 알림 (허접합니다)

    Date2017.11.19 Category코드 By이니스프리 Views2520
    Read More
Board Pagination Prev 1 2 3 4 Next
/ 4