ブログ

WEBサービスの画像処理について

2016年5月25日
斉脇 一志

内容について

ここでは、「WEBサービスプロトタイピング道場」で扱う内容の一部を抜粋して紹介しています。追加情報に興味がある方は、「WEBサービスプロトタイピング道場」へお越しください。

目次

  1. 画像選択
  2. 画像アップロード、ホスト/配信、ダウンロード
  3. 画像処理
  4. 画像解析

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)
  • 合成
  • 文字入れ

やりかた

  • サーバー: 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でやっている(気がする)。

参考

4.画像解析

よくやること

  • メタデータの収集と編集
  • OCRで文字認識
  • 顔の判定/抽出
  • 特徴抽出

やりかた

  • メタデータ(日時やGPSデータなど)を処理する場合がある
    • Twitterでは画像のGPSデータを安全性のため削除している(ストーカー対策)
  • OpenCVのラッパーを使う: JS, Swift, Rubyでもある
  • CPU/GPUの負荷や機械学習が必要なケースが多いのでサーバー側で処理するイメージだったが、Snapchatの顔識別などのようにクライアントで処理をするケースもある
  • SaaS/API(GCP, AWS, Azure): APIの呼び出し数だけお金を払えば、機械学習済みの画像認識エンジンを利用することができる。GCPのCloud Visionなど高精度でOCRなどが可能。