[Javascript] 画像アップロードに特化した便利なImageUploderライブラリ

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

画像アップロードの際に、画像の編集をしたいと思い、画像に特化したアップローダを作りました。
 

新規に構築するサービスで写真をアップロードするような機能を実装する場合、意外と面倒くさい手順が沢山存在します。
 

そうした手順をライブラリ化しておいたので、便利につかえるモジュールを作ってみました。
 

汎用性をもたせたつもりですが、機能要望がありましたら、コメントください。

機能一覧

初回版の機能は以下のとおりです。
 

1. 画像形式のアップロードに特化

 

拡張子は次の3つのみ、「jpg,png,gif」
 

2. EXIFライブラリを併用することで、javascriptでのexif情報の取得が可能

 

https://github.com/exif-js/exif-js
 

3. 複数画像のアップロードが可能

 


 

アップロード前に、画像を確認して、取り消しも可能。
 

4. スマホの場合に、写真撮影からそのままアップロードすることが可能。

 

撮影した写真をアップロード前に編集することも可能。
端末に写真を残さないセキュア対応も可能。
 

ソースコード

1つのディレクトリに以下の2つのソースコードと、「rotate.svg」「delete.svg」をいれて準備します。
 

 

実装方法

1. モジュールの読み込み

 

画像読み込みを行いたいHTMLファイルでモジュールの読み込みを行います。
 

 

2. 画像アップロードボタンを実装

 

アップロードボタンは、どんなエレメントでも構いません。
 

 

3. 設定情報を付与してページ内で実行

 

 

【解説】

“querys”は、送信時に付与したい情報を追加することができます。
“file_select”は、アップロードを実行して完了後に発生するイベント用コールバック関数です。
 

受信用PHP

今回は、受信用のPHPコードはサンプルのみ載せておきます。
それぞれのサイトに合わせたコードで記述してお使いください。
 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です