포럼

  2. Support
  3. 포럼

imgur api v3 이용해서 이미지 업로드 하기

2014.04.11 13:48

prologos

imgur api 라는게 있다는 정보를 게시판에서 알게되어서 개인 적으로 사용하려고 에디터를 개조했는데 잘 작동하는거 같아서 공개합니다.


이 에디터를 사용하기 위해서는 imgur에 가입해서 Application을 생성하고 Client ID를 얻으셔야 합니다.

저도 정확한 정보없이 구글링해서 가입했습니다. @.@


1. 아래 링크를 통해서 계정을 생성합니다. 구글, 페이스북, 트위터 id등으로도 가입 가능하니 별 어려움은 없을겁니다.

https://imgur.com/register


2. 계정 생성이 완료되었다면 아래 링크에서 어플리케이션을 생성합니다. 저도 정확한 정보는 모르지만 제가 생성한 방식을 추가하겠습니다.

https://api.imgur.com/oauth2/addclient


- Application name: 적당히 작명합니다.

- Authorization type: Anonymous usage without user authorization 을 선택합니다.

- callback url: 저도 이게 정확하게 무었을 의미하는지 모르겠습니다. 저는 그냥 https://imgur.com 를 입력 했습니다. 나중에 변경도 가능합니다.


나머지 정보도 채우시면  Client ID와 Client secret가 발급 됩니다. 나중에 필요할지 모르니 두가지 시리얼을 잘 보관합니다 ^^;

이 에디터를 사용하기 위해서 필요한것은 Client ID 입니다.


imgur.jpg


첨부한 압축파일을 받아서 아래 위치에 설치 합니다.

./modules/editor/skins/xpresseditor_imgur


./modules/editor/skins/xpresseditor_imgur/js/upload.js 파일을 에디터로 열어서 134 라인에 위에서 획득한 Client ID를 입력 합니다.

134라인을 살펴보면 아래처럼 되어 있는데 <Your Client ID>를 지우고 자신의 Client ID를 입력하면 됩니다.

xhr.setRequestHeader('Authorization', 'Client-ID <Your Client ID>');


만약 자신의 Client ID가 123456이라면 아래의 형식이 됩니다. Client-ID다음에 한칸 띄우고 입력해야 합니다.

xhr.setRequestHeader('Authorization', 'Client-ID 123456');



구글링해서 api v2버전에 돌아가던 소스를 구해서 v3에서 작동하게 수정하였으며 실력이 미천하여 대충 수정해서 돌아가게만 해놨습니다. 이미지 끌어놓기와 폴더안의 이미지를 한번에 업로드 하는 기능은 ie11에서 테스트 해봤더니 작동하지 않네요.

크롬에서는 모든 기능이 다 작동합니다.


이미지 업로드 방식은 5가지 입니다.

이미지(들) 끌어서 Drop존에 놓기.

Select Files버튼으로 파일 선택 업로드.

Select Drectory버튼으로 해당 폴더안의 모든 이미지 업로드.

Select Zip버튼으로 zip파일로 압축된 이미지 모두 업로드 하기.

외부 이미지를 imgur에 업로드 하기.


폴더나 압축파일 테스트는 10개의 이미지만 해봤으니 성능이 어느정도인지는 정확하지 않습니다.

폴더를 지정하면 폴더를 탐색해서 이미지 파일을 모두 업로드 하며 압축파일을 선택하면 압축을 풀어서 이미지를 업로드 합니다.

이미지 업로드가 완료되면 아래쪽에 썸네일이 나타나며 해당 이미지를 클리하면 에디터 커서 위치에 이미지가 삽입 됩니다.


이미 말씀 드렸듯이 개인적으로 사용하려다 그냥 공개하는것이라는것을 인지하시고 사용하시기 바랍니다.

간단한 테스트는 아래 링크에서 가능합니다.

http://a3ghost.dlinkddns.com/board



- 2014.05.03 추가

href="#"때문인지 이미지 본문 삽입시 스크롤이 상단으로 이동하는 경우가 있어서 이를 수정 했습니다.



이 게시물을
좋아요(+6)
목록
글쓴이 제목 최종 글
마야 중간에 하이픈(-) 있는 도메인... [7] 2014.11.30 by monet
가을풍경 지도API를 이용한 지도게시판의 활용에 대하여 [10] 2014.11.30 by 몽실아빠
배워서남준다 트래픽 초과 문제가 발생하고 있습니다. [8] 2014.11.28 by 배워서남준다
다크진 네이버에서 로그인 API 배포하네요 ㅎㅎ [1] 2014.11.28 by 몽실아빠
prologos imgur api v3 이용해서 이미지 업로드 하기 [65] file 2014.11.27 by 김형진354
이제스타트 웹사이트를 제작하여 운영하시분들은 홍보를 어떻게 하셨나요? [8] 2014.11.26 by 몽실아빠
숭숭군 포인트 경매 좋을까요? [9] 2014.11.25 by 키스미베이베
Lansi XE에서 급히 바껴야 할 것은 무엇일까요? [45] 2014.11.24 by GG
아담하와 그룹연동 - '새그룹부여'의 문제. [1] 2014.11.24 by BJ람보
가르송 최근에 xe설치해보신분? [4] 2014.11.23 by 해운대살고싶다
정도길 xe 포럼 모듈 사용아무도 안하시나요? [2] 2014.11.22 by AJKJ
팔랑심 XE, DiscuzX, Wordpress 비교 [25] 2020.03.14 by Luatic™
죽방망이 개인서버운영하면서 구글웹마스터 도구 사용하시는분~~ [1] file 2014.11.18 by ToFinder
가르송 xe 주소입력창.. [2] file 2014.11.18 by 몽실아빠
Cody 콘텐츠 위젯 제목에 코드 노출되는 문제 [5] 2014.11.17 by imagineshop
황비 Xe 버전업과 php버전 [3] 2014.11.14 by 기진곰
KANTSOFT 공모전 아이디어 게시판 따로 안여나요? [10] 2014.11.13 by SeungXE
mylovedy premiumxe 말고도 유료 레이아웃 개인적으로 파는 사이트 몇개 아시는분 있나요? [6] 2014.11.13 by pentopen
정도길 시중에 나와있는 무료템플릿을 XE화 시켜서 돈받고 판매해도 되나요? [3] 2014.11.12 by 마음의빈자리
가르송 사이트 운영하는 유저로서 요즘 추세~! [2] 2014.11.11 by 가르송
태그 쓰기