[Javascript] ImageUploderライブラリの機能追加 （trimとorientation対応）

独立したもんで会社に出勤しなくなって、自宅作業ばかりなので、毎日午前中はスポーツジムに行くことにしたんですが、平日の朝は、非常に元気なご老人たちのたまり場になっています。 ガールズトークに花を咲かせているおばあちゃん達や、スポーツジムの従業員のお姉さん達にちょっかいをだすおじいさん達、とにかく元気な人は、年齢に関係なくいつまでも若く過ごせるという事を目の当たりにして、３０分以上のランニングに励んでいますが、ようやく胸より出ていたお腹が引っ込んできました。 健康でいる事と若さを保つことは、今の医療技術を考えるとやればやるだけ恩恵がでるという実感が湧いてきて、思わずAppleWatchの１日の連続達成記録が300日を超えてきて、もはやモチベーションMAX状態のため、誰も僕を止めることができない状態になってしまいました。 仕事をしろよ！というツッコミはこの際置いといて、以前に作ったfileuploaderに機能追加をしたので、その紹介をしたいと思います。

trim機能

画像の一部のみをアップロードしたいケースも少なくないため、trim機能というのを実装してみました。 前回バージョンでは、回転ボタンと削除ボタンを画像の上に重ねるようにしていましたが、コントロールパネルとして、画像の下側に移動させ、常時表示するようにしました。 Trim機能のアイコンをクリックすると、切り抜く枠組みが表示されます。 四隅のポイントを移動することで、切り抜く箇所を柔軟に選択できます。 ※細かな回転はできないので、垂直と連動する９０度角のみの対応です。 そのまま送信ボタンを押すと、受け取ったサーバー側で切り抜き作業を行います。 sample.phpに実装をしているので、PHPであれば参考にしてもらえると思います。

Orientation対応

スマホなどで写真を撮った場合、画像が回転した情報をexifのorientation情報として保持されていますが、この対応をしていないと、撮影した画像が横向きに表示されてしまいます。 htmlのライブラリ読み込みの際にexif.jsを読み込んでいるのはjavascriptでそれを回避するためです。 これにより、最終的にサーバーにアップロードされた画像もorientation値に基づいて回転処理を行う必要があるため、同じくsample.phpに実行内容を確認できるようにしています。

今後の機能追加予定

jsでexifを使うことでスマホ撮影の場合のGPS情報の取得などから、地図アプリにマッピングしたり、撮影場所の位置情報によるグルーピングなどが可能になります。 その他、AI系でよくある、画像認識を使って、書かれている文字列を自動OCRしたり、顔認識することで自動タグ付けなどができるようになると、あらゆる方面での需要が一気に広がりますね。 他にも撮影した写真をSNSなどに自動投稿できるようにするだけで、便利なブログ作成なども簡単に作ることができるようになり、夢が膨らみます。

参照

[Javascript] 画像アップロードに特化した便利なImageUploderライブラリ Github : https://github.com/yugeta/fileupload