갠홈 IMGUR/ImgBB API로 이미지 업로드

 

요즘 로그 백업은 갠홈에 하고 있는데...

https://pale-blue-dot.space/

Space Oddity

깨알 갠홈홍보(배너교환해요 ♥)

 

갠홈 서버 용량...을 이미지로 채우기엔 너무 아깝고

그래서 이미지 같은 경우에는 외부 URL을 걸어야하는데

문제: URL을 걸려면 IMGUR에 업로드 하고 다시 주소복사해야함

 

이게 너 무 귀찮아서... 가져오는 법을 공유해드려요

 

API는 Imgur / ImgBB 둘 중 하나 선택

Imgur의 경우 대리 호스팅으로 사용하면 정지될 수도 있다고 하는데

ImgBB도 10GB이상 올리면 모든 이미지가 삭제될 수도 있다고..

선택은 자유롭게 (본 글에서는 두 API 사용하는 법을 각각 다룰 예정)

 

참고로 imgBB의 경우 용량 제한이 있고 저작권에 걸리는 이미지의 경우 삭제함

(32MB 이하 이미지만 업로드 가능)

근데 체감상 Imugr보다 ImgBB가 속도는 훨씬!! 더 빠릅니다 

(2025.11.15 수정)

ImgBB가 업로드 속도는 빠르지만 로딩속도가 너무 느리더라고요;;

Imgur 쓰시길...

 

IMGUR

1. Imgur API 클라이언트 ID 발급

 

IMGUR 회원가입이 필요합니다

저는 그냥 구글 계정 연동했어요

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

가입 후 해당 링크에서 클라이언트 ID를 발급받습니다.

적당히 입력해요

클라이언트 추가를 끝내면 클라이언트 ID와 클라이언트 시크릿 키를 발급받을 수 있습니다.

여기서 ID를 복사해주세요.

 

 

2. 글쓰기 스킨

각자 쓰고 계신 글쓰기 스킨(write.skin.php) 파일을 열어줍니다.

 

위치는 적당히 알아서 삽입하시길...

<button type="button" id="imgurUploadBtn"><i class="fas fa-upload"></i> Imgur 업로드</button>
<input type="file" id="imgurFileInput" accept="image/*" style="display:none;" />

HTML 내부에 삽입

 

기존에 이미지 주소 링크를 입력하던 Input 요소의 ID값이 필요해요.

F12 눌러서 빠르게 확인하는 법

 

주소 입력란의 ID를 확인하셨으면 아래의 코드를 입력해주시면 됩니다. 

	$(function () {
		const CLIENT_ID = 'CLIENT ID'; // ← 여기에 본인의 Imgur Client ID 입력
		const URL_INPUT_ID = $('#URL INPUT ID'); // ← 여기에 URL 입력란 ID 입력


		// 업로드 버튼 클릭 시 파일 선택창 띄우기
		$('#imgurUploadBtn').on('click', function () {
			$('#imgurFileInput').click();
		});

		// 파일 선택 시 업로드 실행
		$('#imgurFileInput').on('change', function () {
			const file = this.files[0];
			if (!file) return;

			URL_INPUT_ID.val('⏳ 업로드 중...');

			const formData = new FormData();
			formData.append('image', file);


			fetch('https://api.imgur.com/3/image', {
			method: 'POST',
			headers: {
				Authorization: 'Client-ID ' + CLIENT_ID
			},
			body: formData
			})
			.then(res => res.json())
			.then(data => {
			if (data.success) {
				URL_INPUT_ID.val(data.data.link);
			} else {
				URL_INPUT_ID.val('❌ 업로드 실패');
			}
			})
			.catch(err => {
			console.error(err);
				URL_INPUT_ID.val('❌ 네트워크 오류');
			});
		});
  	});

자바스크립트 삽입

적용 후 버튼 클릭 - 파일 선택하시면 작동됩니다!

---

ImgBB

1. Imgur API 클라이언트 ID 발급

 

ImgBB 회원가입이 필요합니다

https://api.imgbb.com/

가입 후 해당 링크에서 API key를 발급받습니다.

 

2. 글쓰기 스킨

각자 쓰고 계신 글쓰기 스킨(write.skin.php) 파일을 열어줍니다.

 

위치는 적당히 알아서 삽입하시길...

<button type="button" id="imgurUploadBtn"><i class="fas fa-upload"></i> Imgur 업로드</button>
<input type="file" id="imgurFileInput" accept="image/*" style="display:none;" />

HTML 내부에 삽입

 

기존에 이미지 주소 링크를 입력하던 Input 요소의 ID값이 필요해요.

F12 눌러서 빠르게 확인하는 법

 

주소 입력란의 ID를 확인하셨으면 아래의 코드를 입력해주시면 됩니다. 

	const CLIENT_ID = 'ImgBB API Key'; // ← 여기에 본인의 ImgBB API Key 입력
	const URL_INPUT_ID = $('#URL INPUT ID'); // ← 여기에 URL 입력란 ID 입력

	$(function () {
		// 업로드 버튼 클릭 시 파일 선택창 띄우기
		$('#imgurUploadBtn').on('click', function () {
			$('#imgurFileInput').click();
		});

		// 파일 선택 시 업로드 실행
		$('#imgurFileInput').on('change', function () {
			const file = this.files[0];
			if (!file) return;

			URL_INPUT_ID.val('⏳ 업로드 중...');

			const reader = new FileReader();

			reader.onloadend = function () {
			const base64Image = reader.result.split(',')[1]; 

			const formData = new FormData();
			formData.append('key', CLIENT_ID); 
			formData.append('image', base64Image);

			fetch('https://api.imgbb.com/1/upload', {
				method: 'POST',
				body: formData
			})
				.then(res => res.json())
				.then(data => {
				if (data.success) {
					URL_INPUT_ID.val(data.data.url);
				} else {
					URL_INPUT_ID.val('❌ 업로드 실패');
					console.error(data);
				}
				})
				.catch(err => {
				console.error(err);
					URL_INPUT_ID.val('❌ 네트워크 오류');
				});
			};

			reader.readAsDataURL(file); // base64 인코딩
		});
	});

자바스크립트 삽입

 

 

다들 즐거운 갠홈 되시길!