Tombloo Mozaic でソート by 色

Greasemonkeyでやろうとしたけど動かなかったんで、そのままHTMLにコード書き込みました。HTMLは通常、
Firefoxのプロファイルディレクトリ\extensions\tombloo@brasil.to\chrome\content\library\Mosaic.html
にあります（多分）。Mosaic.htmlの一番下の方にでもコードを書いてやります。

<script src="http://github.com/arikui/image_processing.js/tree/master%2Fimage_processing.js?raw=true"></script>
<script type="text/javascript">
(function(){
	// sort button
	var button = $("control").appendChild(document.createElement("button"));
	button.innerHTML = "sort";
	var photos = [];

	button.onclick = function(){
		this.disabled = true;
		var i = 0;

		// 画像から色を取って配列に入れてる
		deferredForEach($("mosaic").getElementsByTagName("img"), function(photo){
			document.title = i++ / 10 + "%"; // 進捗状況が一目で分かる！

			// 画像がない時は何もしません
			if(!photo.naturalWidth)
				return wait(0);

			photos.push({
				image   : photo,
				color   : ImageProcessing.load(photo.src).average(),
				toString: function(){
					return ("00" + Math.round(this.color.average()).toString()).slice(-3);
				}
			});

			return wait(0);
		})
		// 配列に入れたやつをソートして戻してる
		.addCallback(function(){
			document.title = "complete";

			photos.sort();

			$("mosaic").innerHTML = "";

			photos.forEach(function(photo){
				$("mosaic").appendChild(photo.image);
			});
		})
		.callback();
	};
})()
</script>

sortボタンが現れます。

押して長時間するとソートされます。

応用

画像からモザイク画が作れそうですね。