ImgbbのAPIを使って簡単にサイト上に画像アップロード機能を追加する方法

個人的な備忘録です。

Imgbbという神サービスがあります。このサービスではユーザー登録不要で簡単だれもが画像をアップロードすることができます。

僕はこのAPIが大好きなのですが、 これを使って自分のサイトに画像をURLに変換する機能を簡単に実装することができたのでご紹介します。

これを使うことで、 HTML , CSS , Javescript が機能するサイトであれば画像変換機能を実装することが可能です。WordPressはもちろんのこと、KAJABIなどのCMSでも活用することができます。

準備：imgbbのAPIを取得する

imgbbのAPIの取得は超簡単です。imgbb自体はアカウント不要で使えますが、APIを使うには無料登録が必要になります。

Googleアカウントで簡単に作成可能です。

ログインができたら、以下のAPIに進みます

↓ 以下のようにAPIが表示されているのでこれをコピーしておきます。これを Javascriptの部分に置き換えます。

APIと連携しているため、アップロードされてURL化処理された画像はすべて皆さんのアカウントに保存される仕組みになっています。なのでURL化の目的以外にも、単純に画像をアップロードしてもらうためだけのツールとしても使えそうです。

以下は、今回の実装に必要なスクリプトコードです。

HTML

CSS

Javascript

ポイント：

• formData.append(‘expiration’, ‘864000’); // 10日間（864000秒） の部分ではimgbb に保存できる期間を指定しています。秒数を入力することで日数を設定できます。現在は 10日間保存されて、その後削除されるようにしています。
• const apiKey = ‘YOUR_IMGBB_API_KEY‘; // imgbbで取得したAPIキーに置き換えてください の部分に皆さんのAPIを挿入します。

結果

実際には以下のように機能します。ファイル選択をクリックして画像を選択できます（1回につき1枚まで）

セキュリティの関係で、APIを設定していないので、実際に変換処理ははされません。 画像のプレビューの確認まではできると思います。

↓ 実際の動作の動画です