やっつけスクリプト 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 くらいを、ひとつの要素にしてるみたい。