やっつけスクリプト using SeuratJS

http://q.hatena.ne.jp/1415850722
この質問で使った SeuratJS というライブラリ。
http://seuratjs.com/

こいつを使うと、クライアントサイドだけで、こんな感じの画像加工ができる。


id:libros 画伯

 ↓


こんな感じのスクリプト(やっつけ)で変換したの。

<img src="/images/6-2.jpg"  class="seurat"><br>

<script src="http://seuratjs.com/raphael-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://seuratjs.com/seurat.js"></script>
<script>
$(function() {
    $(".seurat").each(function() {
        var width = $(this).width(); var height = $(this).height();
        var raphaelContainer = $('<div id="'+$(this).attr('id')+'"></div>')
            .width(width)
            .height(height);        
        $(this).replaceWith(raphaelContainer);
        var paper = new Raphael(document.getElementById($(this).attr('id')),width,height+5);
        paper.seurat({
            imageSource: $(this).attr('src')
            ,shape: "rect"
            });
    });
});
</script>


変換されたソースを見てみると、canvas を使ってるんじゃなくて、小さい div の寄せ集めになってるのね :-O
元画像の 10 pixel くらいを、ひとつの要素にしてるみたい。

セキュリティからか、画像とスクリプトを書いたページのドメインが同じじゃないと、動かないっぽい。