ローカルファイル・カメラ・SNSなど、さまざまな画像に対応したJavaScriptの画像アップローダー -Uppload
Post on:2020年2月13日
デスクトップからの画像ファイルはもちろん、PCのカメラで今撮影した写真のアップロード、写真サイトからのアップロード、Twitter、Instagramからのアップロードにも対応したJavaScriptの画像アップローダーを紹介します。
Vue.js、Reactなどのフレームワークも完全にサポートしており、オープンソースで利用できます。

Upploadの特徴
Upploadはカスタマイズにも対応した、JavaScriptの画像アップローダーです。
- 写真画像をドラッグアンドドロップでアップロード。
- PCのカメラで撮影した写真画像をアップロード。
- 写真画像をサイト(Unsplash、Pexels、Pyramidなど)から検索してアップロード。
- 写真画像をWebサービス(Twitter、Instagram、Facebookなど)からアップロード。
- アップロードする際に、画像の編集が可能。
- Vue.js、Reactなどのフロントエンドのフレームワークをサポート。
- すべてのファイルアップロードバックエンドをサポート。
- すべての最新ブラウザ(IE 10+)をサポート。
- MITライセンスで、商用でも無料で利用できます。
操作は非常に簡単です。
下記ページの「Live Demo」をクリックすると、試せます。

アップロードする画像を選択します。
デスクトップから画像ファイルなのか、カメラなのか、写真サイトやWebサービスなのかを選択します。

アップロードする画像を選択
Facebookを選択してみました。

Facebookを選択
私の文鳥コレクションの画像をアップロードしてみます。

画像のアップロード
アップロードした画像は、クロップや回転などの編集が可能です。

画像の編集
編集が完了したら、右下の「Upload」をクリックすると、アップロードできます。

アップロードの完了
Upploadのデモ
Upploadでは、さまざまなデモが用意されており、カスタマイズも可能です。

Upploadの使い方
Upploadの実装はドキュメントをご覧ください。

sponsors