久しぶりの投稿；
Demo: HTML5 Image Processing (Symmetric Nearest Neighbor)
(Firefox3.5とSafari4で動作確認しています)
HTML5でConvolutionFilterに続いて、簡単な画像処理を試してみます。
以前、ActionScriptで書いたSymmetric Nearest NeighborをJavaScriptで。
半径を大きくするとそれなりに絵画っぽくなってくれますが、やはり重いです；
・クライアント
[javascript]
var context = document.getElementById(‘Canvas’).getContext(‘2d’);
var bmp = new Bitmap(‘sample.jpg’, context);
var radius = 3;
bmp.applyFilter(new SNNFilter(radius));
[/javascript]
bitmap.js
(関係ある箇所だけ抜粋)
[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;
}
};
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 SNNFilter = Class.create({
initialize : function(radius) {
this.radius = radius;
},
apply : function(src, dst) {
var w = src.width, h = src.height;
var srcData = src.data;
var dstData = dst.data;
var sumR, sumG, sumB;
var rc, gc, bc, r1, g1, b1, r2, g2, b2;
var cnt = 0;
var xyPos, uvPos;
for(var y=0;y
HTML5の勉強 – Rest Term
One thought