最近投稿してないので、忘れないようにjsdo.itのものを挙げてみます。
Processing.jsで画像を扱えるのですが、クロスドメインの制限もありますが、
コメント形式でプリロードの指定が必要？であったり、動的に扱うことをあまり
考えられていないようで、自力でやってみました。
自ドメイン外の任意のURLの画像を取得するには
ドメイン外の画像ファイルをDataURL形式でもらうJSONPを利用します。
そのため、Processing.js側のプログラム中からJavaScriptの関数を
呼び出します。
いったんCanvasに描画して、イメージデータを取得
JSONPで取得たDataURL形式のイメージをCanvasに描画します。
その後、Context#getImageDataで、画像データを取得します。
Processing.js側での処理
Processing側のメソッド？の引数に取得した画像データを指定して呼び出し、
Processing側のコード内で、頑張ってPImageのpixelsを構成します。
sample.js
// Processing.jsから呼ばれる関数
function getCsImage(url) {
var s = document.createElement('script');
s.charset = 'utf-8';
s.type = "text/javascript";
url.match(/http:\/\/(.*?)\/([\s\S]*)/i);
var host = RegExp.$1;
var path = RegExp.$2;
s.src = "http://kjunurl.appspot.com/imgview?callback=myHandler&host="
+host+"&path=/"+escape(path);
document.body.appendChild(s);
}
function myHandler(response) {
var cs = document.createElement('canvas');
cs.width = 64;
cs.height = 64;
var ctx = cs.getContext('2d');
var img = new Image();
img.src = response.image;
img.onload = function() {
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, cs.width, cs.height);
var imgData = ctx.getImageData(0,0,64,64);
var processingInstance = Processing.getInstanceById('processing-canvas');
processingInstance.psCbGetCsImage(imgData);
};
}
sample.html
<meta name = "viewport" content = "width=device-width">
<script src="http://jsrun.it/lib/Processing.js-1.4.0/js"></script>
<script type="application/processing" target="processing-canvas">
void setup(){
size(document.documentElement.clientWidth*0.9, document.documentElement.clientHeight*0.9);
getCsImage("http://jsdo-it-static-contents.s3.amazonaws.com/images/icon/a/1/b/7/a1b7607006af8a32668e3de4e0627e644e4a1002_100.jpg");
}
void psCbGetCsImage(imgData) {
PImage pimg = createImage(64,64,RGB);
//console.log(imgData.data.length);
int pcount = 0;
for(int i = 0; i < imgData.data.length; i++) {
pimg.pixels[pcount++] = color(imgData.data[i],imgData.data[i+1],imgData.data[i+2]);
i = i+3;
}
// ここまででpimgにPImage型で画像データが格納されます。
image(pimg,pimg.width,pimg.height);
// 以降はProcessing.jsのフィルタ処理
pimg.filter(BLUR,.9);
pimg.filter(BLUR,.9);
pimg.filter(POSTERIZE,3);
image(pimg,0,0);
}
void draw(){
//fill((int)(random(256)));
}
</script>
<canvas id='processing-canvas'></canvas>
<canvas id="test"></canvas>