lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-20 03:18:00 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improved performance of convolution filters.

Browse Source 
Previously, I would work with a regular array and compute/store/copy
to/from that array. It should be faster to create an imageData object,
create the convolution result in that object and finally:
`context.putImageData(result)`.
This commit is contained in:
ippo615
2013-08-04 14:34:56 -04:00
parent e631eff6b4
commit d355b1fe97
1 changed files with 32 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/filters/ConvolvePack.js
View File

@@ -1,6 +1,6 @@
(function() {
var convolve_internal = function(imageData,matrix){
var convolve_internal = function(imageData,matrix,result){
// Input data
var pixels = imageData.data,
imageSizeX = imageData.width,
@@ -9,8 +9,9 @@
pixel;
// An array for storing the result
var result = [];
result.length = imageSizeX*imageSizeY*4;
// (this should now be passed as the 3rd argument)
// var result = [];
// result.length = imageSizeX*imageSizeY*4;
// Determine the size and demsionality of the matrix
// Note: it should be square and odd (3,5,7,9 etc...)
@@ -57,13 +58,14 @@
}
// copy the result to the original canvas
var lastPos = nPixels*4;
for( pos=0; pos<lastPos; pos+=4 ){
pixels[pos+0] = result[pos+0];
pixels[pos+1] = result[pos+1];
pixels[pos+2] = result[pos+2];
//pixels[pos+3] = result[pos+3];
}
// Should now be handled by the CALLER using the `result` argument
//var lastPos = nPixels*4;
//for( pos=0; pos<lastPos; pos+=4 ){
// pixels[pos+0] = result[pos+0];
// pixels[pos+1] = result[pos+1];
// pixels[pos+2] = result[pos+2];
// //pixels[pos+3] = result[pos+3];
//}
};
// Definition of a gaussian function
@@ -176,9 +178,14 @@
* @param {Object} imageData
*/
Kinetic.Filters.UnsharpMask = function(imageData) {
// Create a temporary image for the result, perform the convolution
// then copy the result back
var result = this.getCanvas().getContext('2d').createImageData(imageData.width,imageData.height);
convolve_internal(imageData,
make_unsharp_kernel(5,this.getFilterAmount()/100)
make_unsharp_kernel(5,this.getFilterAmount()/100),
result
);
this.getCanvas().getContext('2d').putImageData(result,0,0);
};
/**
@@ -188,9 +195,12 @@
* @param {Object} imageData
*/
Kinetic.Filters.SoftBlur = function(imageData) {
var result = this.getCanvas().getContext('2d').createImageData(imageData.width,imageData.height);
convolve_internal(imageData,
make_soft_blur_kernel(5,this.getFilterAmount()/100)
make_soft_blur_kernel(5,this.getFilterAmount()/100),
result
);
this.getCanvas().getContext('2d').putImageData(result,0,0);
};
@@ -203,11 +213,14 @@
Kinetic.Filters.Edge = function(imageData) {
var s = this.getFilterAmount()/100;
if( s === 0 ){ return; }
convolve_internal(imageData,[
var matrix = [
[ 0, -1*s, 0],
[-1*s,(1-s)+4*s,-1*s],
[ 0, -1*s, 0]
]);
];
var result = this.getCanvas().getContext('2d').createImageData(imageData.width,imageData.height);
convolve_internal(imageData,matrix,result);
this.getCanvas().getContext('2d').putImageData(result,0,0);
};
/**
@@ -219,11 +232,14 @@
Kinetic.Filters.Emboss = function(imageData) {
var s = this.getFilterAmount()/100;
if( s === 0 ){ return; }
convolve_internal(imageData,[
var matrix = [
[-1*s,-0.5*s, 0],
[-0.5*s,1+0.5*s, 0.5*s],
[ 0, 0.5*s, 1*s]
]);
];
var result = this.getCanvas().getContext('2d').createImageData(imageData.width,imageData.height);
convolve_internal(imageData,matrix,result);
this.getCanvas().getContext('2d').putImageData(result,0,0);
};
})();