ImagePipes Concept

ImagePipes Conceptとは？

Yahoo Pipesはテキストを対象としたツールだが、 それを画像に対しても使おう！という考え

Yahoo Pipesを使って、テキストに対して、いろんなソースからRSSを取得してマージしたり、検索語でフィルタリングしたり、しているように、
画像に対して、sharpnessやcontrast等のパラメータを調整したり、顔を含むかどうかでフィルタリングしたり、といったことを、Yahoo PipesのUIを使って組み合わせられるようにする。

ポイントは、画像処理機能をwebサービスとして公開すること。そしてYahooPipesを使ってシーケンシャルにつなげられるようにwebサービスのI/Fをそろえること。

ImagePipesを使えばどんなことができるの？

• Flashの開発のみで、Flickrから取得した画像の中から顔領域を抽出してなにか
  顔領域抽出と切り取りのwebサービスはつくってImagePipeとして公開したので、サーバーサイドはつくる必要が無い
  demo
• javascriptの開発のみで、ページ内の写真を全部ロゴ付の写真に置き換える
  画像合成のwebサービスはつくってImagePipeとして公開したので、サーバーサイドはつくる必要が無い
  demo
• オンライン画像編集ツールのバックエンド

ImagePipesの仕組みは？

• 画像処理機能を提供するwebサービスの入出力仕様を(緩く)統一
  最低限満たすべき要件: 入出力はHTTP, MethodはPOST, Parameterは"data", ValueはUTF-8のJSON
  
• JSONは最低限以下の形式をとる
  {"items":[{"url":"http://path.to/image.jpg"}]}
  items配列の1要素が画像を意味する
  urlは必須
  webサービスの提供する画像処理機能に応じてJSON内に要素を増やしてもよい
  urlには、入力のJSON場合には、画像処理対象の画像のurlが入る
  出力のJSONのurlは、画像加工後の画像のurlが入る（webサービスのドメイン以下になるはず）
  顔領域抽出等、画像解析のみで加工は行わないwebサービスの場合には、urlはスルー
  
  ex: 顔領域抽出のwebサービスの出力は
  {"items":[{"rects":[{"y":50,"width":61,"x":117,"height":61}],"url":"http://path.to/image_including_a_face.jpg"}]}
  
  こうすることで、YahooPipes上で、[imagepipes]facecropのように、webサービスをシーケンシャルにつなぐことができる
  （facecropの場合には、顔領域抽出webサービスの出力するJSONがそのまま、切り取りwebサービスにPOSTされる）
• アクセス可能ドメインが "*" なcrossdomain.xml をwebサービスのサーバ(加工後の画像が置かれる場所)に置く
  （Flashから画像を読み込んで操作できるように）
• YahooPipesでこの入出力仕様を満たしたwebサービスを使ってPipeをつくるときに、
  YahooPipesでタグ imagepipe をいれる
  ※タグは [Edit Source] の画面の右上にある [Properties] の中で設定できます
  

どんな画像処理ができるの？

http://imagepipes.kayac.com/ ではひとまず以下の4つを用意しています。
これらに、↑の仕様にしたがってみなさんの開発したwebサービスを加えて、自由に組み合わせてImagePipeをつくることができます。
みなさんの参加をお待ちしています！

• 顔領域抽出
  これを使ったImagePipe: [imagepipe]facerecon, [imagepipe]facecrop
• エッジ強調
  これを使ったImagePipe: [imagepipe]sharpen
• 切り取り
  これを使ったImagePipe: [imagepipe]crop, [imagepipe]facecrop
• 画像合成
  これを使ったImagePipe: [imagepipe]rubthrough
• リサイズ
  これを使ったImagePipe: [imagepipe]resize