Paper.jsでCanvasに画像を表示させて、ピクセルデータを取得する

画像の読み込み方

Rasterを使う

Paper.jsの特徴はベクトルデータを扱えることで描画が綺麗で高速であるということです。
しかし画像はベクトルデータではありません。そこでラスタライズ(ベクトルデータをビットマップデータに変換)する必要があるのでRasterという名前になっているのだと思います。間違ってたらごめんなさいです。

<script type="text/paperscript" canvas="myCanvas">
var raster = new Raster("cat");
    
raster.position = view.center;

</script>
<img id="cat" src="http://jsrun.it/assets/q/a/M/u/qaMu3.jpeg">
<canvas id="myCanvas" resize></canvas>

このようにimgタグにidを設定しておきます。

img{
    display:none;
}

canvasとimgが二重に表示されてしまうので、imgは非表示にしておきます。

サイズを変更する

var raster = new Raster("cat");
    
raster.position = view.center;

raster.on("load",function(){
    raster.size = new Size(100,100);
});

サイズはSizeで指定することができます。raster.onで画像を読み込んだら関数を実行するようにしています。

ピクセルデータを読み込む

demo

ネコの画像をモザイク表示させて、一つ一つの円の大きさをアニメーションで変えています。

for(var y = 0;y < raster.height;y++){
    for(var x = 0;x < raster.width;x++){
        //Pixel Data
        var color = raster.getPixel(x,y);
        
        //circle
        var path = new Path.Circle({
            center:new Point(x,y) * gridSize,
            radius:gridSize / 2 / spacing
        });
        
        path.fillColor = color;
        //Random size
        path.scale(Math.random());
    }
}

座標を指定してgetPixelで色情報を読み込むことができます。

getPixelで取得できるデータ

Color {_type: "rgb", _components: Array[3], _properties: Array[3], _alpha: 1}
_alpha: 1
_canvasStyle: "rgb(22,22,24)"
_components: Array[3]
_owner: Path
_properties: Array[3]
_type: "rgb"
alpha: (...)
blue: (...)
brightness: (...)
components: (...)
destination: (...)
gradient: (...)
gray: (...)
green: (...)
highlight: (...)
hue: (...)
lightness: (...)
origin: (...)
red: (...)
saturation: (...)
type: (...)
__proto__: Color