画像
- 画像選択
- 画像アップロード、ホスト/配信、ダウンロード
- 画像処理
- 画像解析
Instagram, Flickr, Pinterest, Dribble
- Google Cloud Vision
- Microsoft Azure ML
- Bluemix
1.画像選択
クライアントでの選択方法
- ブラウザ: HTMLのinputタグでtypeをfileにして、画像を選択
- または、HTML5のDnD APIで複数枚のFileを取得する
- jQueryにしろReactにしろ、それぞれやり方ある
- iOS: AlamofireでNSDataとしてファイルを選択する
- カメラの起動、カメラロールからの取得など
- Androidも同様(いくつかライブラリがある)
参考
2.画像アップロード、ホスト/配信、ダウンロード
ファイルアップロード
- multipart/form-dataでアップロードする
画像の種類
- pre-flightでアップロードするとしても、不正な画像でないかチェックする
- jpg, pngかどうかチェックする
- 画像容量もチェックする(大きすぎるファイルは不正と判断する)
画像ファイル形式の基礎と特徴まとめ(JPEG・GIF・PNGなど) | 株式会社LIG
ホスト/配信
- WEBサーバーと同じ場所にホスト: Nginxが稼働しているファイルシステムと同じ場所にホスト
- S3など専用ファイルサーバーにホスト: サーバー経由またはクライアントからダイレクトで送る
- AkamaiなどのCDNから配信: CDNにキャッシュさせて配信する
- CloudFront(AWS), Cloudflare, Fastlyなど
pre-flightでS3に画像をアップ
メインサーバーでは、選択された画像のメタデータだけ送信し、認証処理と画像のvalidationを完了したら、S3へのアクセストークンを返却し、クライアントから直接画像をS3にアップロードする。メインサーバーの負荷を減らすためにも、直接アップロードしたほうがお得。CORSに注意が必要。
画像ダウンロードとクライアントでのキャッシュ
- クライアントで画像を読み込む時は非同期で読み込むようにする
- 通信料を減らすため、同じ画像ファイルはできるだけクライアントでキャッシュしておく
データ転送量/送信量と利用料金
転送量で課金されるので、画像共有サービスなどの場合注意が必要。
3.画像処理
- 圧縮(compression)
- サイズ変更(resize)
- 拡大縮小(scale)
- サムネイル(thumbnail)
- 切り出し(crop)
- 回転(lotate)
- 色変換/エフェクト(effect/filter)
- 合成
- 文字入れ
imgix • Real-time image processing and image CDN
やりかた
- サーバー: RubyやWEBサーバーで加工、圧縮、エンコードなど
- ブラウザ: JSで加工する
- iOS: Swiftで加工する
- SaaS/API: AWS LambdaやAPIサービスで加工する
AWS Lambda + Node.js
- AWS Lambdaにサムネイル作成用のNode.jsスクリプトをセットする
- S3にアップロードされたイベントを拾って、Lambdaでサムネイルを作成し、別のBucketにサムネイルホスト
- 画像処理をEC2でやるよりも安価に画像処理ができる
Apache or Nginx
ApacheやNginxなどのWEBサーバーのモジュールでサムネイルを作成する。CookpadなどはApacheでやっている(気がする)。
参考
- 第26回 RMagickを用いた画像処理(1)リサイズ:Ruby Freaks Lounge|gihyo.jp … 技術評論社
- rubyで使える動画・画像解析ライブラリ ヽ(゚ー゚ヽ)(ノ゚ー゚)ノわぁい - Qiita
- rubyで画像処理できるRMagickの紹介をするよ ヽ(゚ー゚ヽ)(ノ゚ー゚)ノわぁい - Qiita
- globchastyy/SwiftUIImageEffects: Swift port of Apple UIImage+UIImageEffecs category.
- HTML5/Javascriptの画像処理ライブラリまとめ
- JSで顔認識(Face Detection) - Qiita
4.画像解析
よくやること
- メタデータの収集と編集
- OCRで文字認識
- 顔の判定/抽出
- 特徴抽出
やりかた
- メタデータ(日時やGPSデータなど)を処理する場合がある
- Twitterでは画像のGPSデータを安全性のため削除している(ストーカー対策)
- OpenCVのラッパーを使う: JS, Swift, Rubyでもある
- CPU/GPUの負荷や機械学習が必要なケースが多いのでサーバー側で処理するイメージだったが、Snapchatの顔識別などのようにクライアントで処理をするケースもある
- SaaS/API(GCP, AWS, Azure): APIの呼び出し数だけお金を払えば、機械学習済みの画像認識エンジンを利用することができる。GCPのCloud Visionなど高精度でOCRなどが可能。