HTML5のcanvasを使って簡単な画像処理をやってみます。
試してみたのは基本的な畳み込みフィルタ。
今回はAS3のConvolutionFilter風のインタフェースで作りました。
Demo: HTML5 Image Processing (Convolution Filter)
汎用的に作ろうとすると少し時間がかかりそうだったので、ひとまず畳み込みフィルタの部分だけ。
引数はAS3のものよりずっと少なく、matrix, divisor, bias の3つ。
matrixXやmatrixYも用意してないのでフィルタカーネルのサイズは3×3限定だし、
異常系の処理も不十分で修正が必要ですが；；
他のフィルタ類は時間を見つけて作ってみようと思います。
・クライアント例
[javascript]
var context = document.getElementById(‘Canvas’).getContext(‘2d’);
var bmp = new Bitmap(‘sample.jpg’, context);
var matrix = [-1, -1, -1, -1, 8, -1, -1, -1, -1]; // フィルタカーネル
var divisor = 1;
var bias = 0;
bmp.applyFilter(new ConvolutionFilter(matrix, divisor, bias));
[/javascript]
[javascript]
var Class = {
create : function() {
var properties = arguments[0];
function self() {
this.initialize.apply(this, arguments);
}
for(var i in properties) {
self.prototype[i] = properties[i];
}
if(!self.prototype.initialize) {
self.prototype.initialize = function() {};
}
return self;
}
};
/*—————————————-*/
/**
* Classes for Image Processing.
*/
var Bitmap = Class.create({
initialize : function(source, context) {
this.bitmapData = new Image();
this.bitmapData.src = source;
this.context = context;
this.bitmapData.addEventListener(‘error’,
function() { alert(“can’t load image”); },
false);
},
applyFilter : function(filter) {
try {
if(this.bitmapData.complete) {
this.context.drawImage(this.bitmapData, 0, 0);
var w = this.bitmapData.width, h = this.bitmapData.height;
var src = this.context.getImageData(0, 0, w, h);
var dst = this.context.createImageData(w, h);
filter.apply(src, dst);
this.context.putImageData(dst, 0, 0);
}else {
throw new Error(“load image incomplete”);
}
}catch(e) {
throw e;
}
}
});
var ConvolutionFilter = Class.create({
initialize : function(matrix, divisor, bias) {
this.matrix = matrix;
this.divisor = divisor;
this.bias = bias;
},
apply : function(src, dst) {
var w = src.width, h = src.height;
var srcData = src.data;
var dstData = dst.data;
var len = dstData.length;
var r, g, b, i, j, k, step, kStep;
for(var y=1; y
}
}
});
[/javascript]
ポイントを絞って簡単に説明を。
(以下 context は getContext(‘2d’) で取得したオブジェクト)
* imagedata = context.createImageData(sw, sh)
幅sw, 高さshのImageDataオブジェクトを生成します。
ピクセルデータ(imageData.data)はすべて0(黒)になっています。
* imageData = context.getImageData(sx, sy, sw, sh)
(x, y)=(sx, sy) を基準に幅sw, 高さshの領域のピクセルデータを取得できます(imageData.data)。
これはAS3における BitmapData.getPixels() のようなもので、ARGB32bitのデータを扱い、
インデックスは 0 から 幅×高さ×4-1 まで。
* context.putImageData(imagedata, dx, dy)
指定されたImageDataオブジェクトを (x, y)=(dx, dy) を基準に描画します。
・参考記事
createImageData, getImageData, putImageData メソッド – Canvasリファレンス – HTML5.JP
・関連記事
HTML5の勉強