TumblrPhotoMosaicMakerのweb版を作りました


tumblrPhotoMosaicMaker
http://kasei-san.sakura.ne.jp/rabo/tumblrPhotoMosaicMaker/

これは何?

Tumblrに落ちている画像を元にフォトモザイクを生成するWebサービスです
こんな感じの写真を簡単に生成できます

C74に頒布したTumblrPhotoMosaicMakerのweb版です

注意点とかある?

生成された画像は、自動的にTumblrにUPされますので、あんまりアレな画像をUPしないでくれるとうれしいです

どのTumblelogにUPされるの?

こちらです
http://tumblrphotomosaicmakerarchive.tumblr.com/

フォトモザイクの写真はどこから取ってきてるの?

今のところ以下のTumblelogの2008/11/26までのPhotoを使用しています

2008/11/28追記

大幅修正

不具合修正

モザイクに当てはまる写真が無い場合に、矩形を表示する処理の不具合を修正しました
これで、前回話した一部のドットが黒くなる不具合も修正されたはず

問題点対応

極端な色の画像の場合、対応する写真が殆ど無く、矩形だらけになってしまう問題も修正
最初に画像をチェックして、対応する写真が少ない場合は、全体の彩度を下げるようにしました
また、ドット単位でも、矩形を表示する前に、彩度を下げて対応する写真を再度探しに行くようにしました
その為、画像によっては出力結果がモノクロっぽくなります
例えばこんな感じ

これでかなーりましになったはずです。
この辺のアルゴリズムを自分でひねくり出したけど、絶対に研究されている分野だと思う…。

2008/11/27追記

不具合:2008/11/28修正済み

写真によっては、一部のドットが黒くなってしまうようです
↓これとか


原因究明の為、アップロードされた元画像を保存するように変更しました

問題点:2008/11/28修正済み

モザイクに当てはまる写真が無い場合は、単色の矩形を表示しています
参考に、色毎の写真の枚数の一覧を作りました。→こちら
見ての通り、極端な色の写真が殆ど存在しません
これは、写真の色を判定する時に、画像の平均色を取得している為と思われます
このあたりはどうしたものか…

技術ネタ

jquery.form.jsで変な戻り値

jquery.form.jsで、perlCGIから結果を受け取ると、何故か行末に

<div style="display:none;" id="FLASH_MESSAGE"></div>

という文字列が入ることがありました
原因は謎

Content-type: application/octet-stream;はjavascriptで受け取れない

当然といえば、当然なのですが
ブラウザ側で受けてしまっている為、javascript側に処理が廻ってきません
なので、Content-type: application/octet-streamで返ってくる処理をajaxで呼び出す場合、
戻りが無いことを意識した処理が必要

Image::MagickのResize(geometry)の仕様

Image::MagickのResizeでgeometryを指定する場合、
ガンマ比(縦横比)を維持したまま、画像をリサイズしてくれるが、
この時、辺の長さが大きいほうがgeometryで指定した数値となり、小さい方の辺が可変となる


例えば、200x100pxの画像の場合、

$img->Resize(geometry=>"50x50");

この場合、50x25pxの画像になる


上記勘違いしておりました
dqneoさんご指摘感謝です!

正しくは、元画像のガンマ比(縦横比)を維持したままで、geometryで指定した数値に収まる最大の大きさです

例えば、200x100pxの画像の場合、

$img->Resize(geometry=>"200x50");

この場合、100x50pxの画像になります


図にするとこんな感じ


だいたいそんな感じ