mirror of
https://github.com/konvajs/konva.git
synced 2026-01-18 19:51:21 +08:00
Cleaned js, added tests for all convolution filters
This commit is contained in:
ippo615
@@ -105,7 +105,12 @@
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* colorizes the image so that it is just varying shades of the specified color
|
||||
* @function
|
||||
* @memberof Kinetic.Filters
|
||||
* @param {Object} imageData
|
||||
*/
|
||||
Kinetic.Filters.Colorize = function(imageData) {
|
||||
var data = imageData.data;
|
||||
|
||||
@@ -134,6 +139,7 @@
|
||||
|
||||
/**
|
||||
* Gets the colorizing color. Should be an array [r,g,b] ie [255,0,128].
|
||||
* note that white [255,255,255] black [0,0,0] and greys [r,r,r] get treated as red.
|
||||
* @name setFilterColorizeColor
|
||||
* @method
|
||||
* @memberof Kinetic.Image.prototype
|
||||
|
||||
@@ -27,6 +27,7 @@
|
||||
// Accumlators and positions for iterating
|
||||
var r,g,b,a, x, y, pos, i,j;
|
||||
|
||||
// Handle the 2D matrix
|
||||
if( is2D ){
|
||||
for( y=yMin; y<yMax; y+=1){
|
||||
for( x=xMin; x<xMax; x+=1){
|
||||
@@ -51,7 +52,9 @@
|
||||
//result[pos+3] = a;
|
||||
}
|
||||
}
|
||||
}else{
|
||||
}
|
||||
// Handle the 1D matrix
|
||||
else{
|
||||
|
||||
// Horizontal pass (ie convolving every row of the image)
|
||||
for( y=0; y<imageSizeY; y+=1){
|
||||
@@ -112,6 +115,7 @@
|
||||
}
|
||||
};
|
||||
|
||||
// Definition of a gaussian function
|
||||
var gaussian = function(x,mean,sigma){
|
||||
var dx = x - mean;
|
||||
return Math.pow(Math.E, -dx*dx / (2*sigma*sigma));
|
||||
@@ -136,6 +140,17 @@
|
||||
return kernel;
|
||||
};
|
||||
|
||||
var make_soft_blur_kernel = function( size, blur_percent ){
|
||||
// A soft blur is achieve by blurring the image then
|
||||
// merging the blured and unblurred image (ie 60/40).
|
||||
// Instead of that we've scaling the blur kernel (ie 60)
|
||||
// and adding the identity scaled (ie 40) to the kernel
|
||||
var kernel = make_blur_kernel( size, blur_percent / 100 ),
|
||||
mid = Math.floor(size/2);
|
||||
kernel[mid][mid] += 1 - (blur_percent/100);
|
||||
return kernel;
|
||||
};
|
||||
|
||||
var make_unsharp_kernel = function( size, unsharp_percent ){
|
||||
// An 'unsharp mask' is made by blurring the inverted image
|
||||
// and combining it with the original (like a soft blur but
|
||||
@@ -147,6 +162,34 @@
|
||||
return kernel;
|
||||
};
|
||||
|
||||
/**
|
||||
* general convolution
|
||||
* @function
|
||||
* @memberof Kinetic.Filters
|
||||
* @param {Object} imageData
|
||||
*/
|
||||
Kinetic.Filters.Convolve = function(imageData) {
|
||||
convolve_internal(imageData,this.getFilterConvolutionMatrix());
|
||||
};
|
||||
|
||||
Kinetic.Node.addFilterGetterSetter(Kinetic.Image, 'filterConvolutionMatrix', 0);
|
||||
/**
|
||||
* get the current convolution matrix.
|
||||
* @name getFilterConvolutionMatrix
|
||||
* @method
|
||||
* @memberof Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* set the current convolution matrix, can be a single dimensional array
|
||||
* or a 2D array. A 1D array will be applied horizontally then flipped
|
||||
* and applied vertically. A 2D array will be applied as-is. The array
|
||||
* dimensions should be odd (ie 3x3, 5x5, 7, etc...)
|
||||
* @name setFilterConvolutionMatrix
|
||||
* @method
|
||||
* @memberof Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* unsharp mask
|
||||
* @function
|
||||
@@ -162,27 +205,6 @@
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* general convolution
|
||||
* @function
|
||||
* @memberof Kinetic.Filters
|
||||
* @param {Object} imageData
|
||||
*/
|
||||
Kinetic.Filters.Convolve = function(imageData) {
|
||||
convolve_internal(imageData,this.getFilterConvolutionMatrix());
|
||||
};
|
||||
|
||||
var make_soft_blur_kernel = function( size, blur_percent ){
|
||||
// A soft blur is achieve by blurring the image then
|
||||
// merging the blured and unblurred image (ie 60/40).
|
||||
// Instead of that we've scaling the blur kernel (ie 60)
|
||||
// and adding the identity scaled (ie 40) to the kernel
|
||||
var kernel = make_blur_kernel( size, blur_percent / 100 ),
|
||||
mid = Math.floor(size/2);
|
||||
kernel[mid][mid] += 1 - (blur_percent/100);
|
||||
return kernel;
|
||||
};
|
||||
|
||||
/**
|
||||
* soft blur
|
||||
* @function
|
||||
@@ -368,22 +390,4 @@
|
||||
]);
|
||||
};
|
||||
|
||||
Kinetic.Node.addFilterGetterSetter(Kinetic.Image, 'filterConvolutionMatrix', 0);
|
||||
/**
|
||||
* get the current convolution matrix.
|
||||
* @name getFilterConvolutionMatrix
|
||||
* @method
|
||||
* @memberof Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* set the current convolution matrix, can be a single dimensional array
|
||||
* or a 2D array. A 1D array will be applied horizontally then flipped
|
||||
* and applied vertically. A 2D array will be applied as-is. The array
|
||||
* dimensions should be odd (ie 3x3, 5x5, 7, etc...)
|
||||
* @name setFilterConvolutionMatrix
|
||||
* @method
|
||||
* @memberof Kinetic.Image.prototype
|
||||
*/
|
||||
|
||||
})();
|
||||
|
||||
@@ -1488,7 +1488,7 @@ Test.Modules.IMAGE = {
|
||||
};
|
||||
imageObj.src = '../assets/lion.png';
|
||||
},
|
||||
'1D convolution filter': function(containerId) {
|
||||
'unsharp mask filter': function(containerId) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
@@ -1506,27 +1506,208 @@ Test.Modules.IMAGE = {
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
//darth.setFilter(Kinetic.Filters.Sharpen);
|
||||
//darth.setFilter(Kinetic.Filters.DetectEdges);
|
||||
//darth.setFilter(Kinetic.Filters.DetectHorizontalEdges);
|
||||
//darth.setFilter(Kinetic.Filters.DetectVerticalEdges);
|
||||
//darth.setFilter(Kinetic.Filters.DetectDiagonal45Edges);
|
||||
//darth.setFilter(Kinetic.Filters.DetectDiagonal135Edges);
|
||||
//darth.setFilter(Kinetic.Filters.RemoveMean);
|
||||
//darth.setFilter(Kinetic.Filters.Emboss);
|
||||
//darth.setFilter(Kinetic.Filters.Darken);
|
||||
//darth.setFilter(Kinetic.Filters.Lighten);
|
||||
//darth.setFilter(Kinetic.Filters.Convolve);
|
||||
//darth.setFilterConvolutionMatrix([0.3,0.2,0.0,0.2,0.3]);
|
||||
//darth.setFilterConvolutionMatrix([[0,-2,0], [-2,11,-2], [0,-2,0]]);
|
||||
darth.setFilter(Kinetic.Filters.SoftBlur);
|
||||
//darth.setFilter(Kinetic.Filters.UnsharpMask);
|
||||
darth.setFilter(Kinetic.Filters.UnsharpMask);
|
||||
darth.setFilterSoftBlurAmount(90);
|
||||
darth.setFilterSoftBlurSize(7);
|
||||
layer.draw();
|
||||
var dataUrl = layer.toDataURL();
|
||||
//console.log(dataUrl);
|
||||
testDataUrl(dataUrl, '1D convolution filter', 'problem with convolution filter.');
|
||||
testDataUrl(dataUrl, 'unsharp mask filter', 'problem with unsharp mask filter.');
|
||||
};
|
||||
imageObj.src = '../assets/darth-vader.jpg';
|
||||
//imageObj.src = '../assets/lion.png';
|
||||
},
|
||||
'soft blur filter': function(containerId) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 10,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
darth.setFilter(Kinetic.Filters.SoftBlur);
|
||||
darth.setFilterSoftBlurAmount(10);
|
||||
darth.setFilterSoftBlurSize(7);
|
||||
layer.draw();
|
||||
var dataUrl = layer.toDataURL();
|
||||
//console.log(dataUrl);
|
||||
testDataUrl(dataUrl, 'soft blur filter', 'problem with soft blur filter.');
|
||||
};
|
||||
imageObj.src = '../assets/darth-vader.jpg';
|
||||
//imageObj.src = '../assets/lion.png';
|
||||
},
|
||||
'sharpen filter': function(containerId) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 10,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
darth.setFilter(Kinetic.Filters.Sharpen);
|
||||
layer.draw();
|
||||
var dataUrl = layer.toDataURL();
|
||||
//console.log(dataUrl);
|
||||
testDataUrl(dataUrl, 'sharpen filter', 'problem with sharpen filter.');
|
||||
};
|
||||
imageObj.src = '../assets/darth-vader.jpg';
|
||||
//imageObj.src = '../assets/lion.png';
|
||||
},
|
||||
'remove mean filter': function(containerId) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 10,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
darth.setFilter(Kinetic.Filters.RemoveMean);
|
||||
layer.draw();
|
||||
var dataUrl = layer.toDataURL();
|
||||
//console.log(dataUrl);
|
||||
testDataUrl(dataUrl, 'remove mean filter', 'problem with remove mean filter.');
|
||||
};
|
||||
imageObj.src = '../assets/darth-vader.jpg';
|
||||
//imageObj.src = '../assets/lion.png';
|
||||
},
|
||||
'emboss filter': function(containerId) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 10,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
darth.setFilter(Kinetic.Filters.Emboss);
|
||||
layer.draw();
|
||||
var dataUrl = layer.toDataURL();
|
||||
//console.log(dataUrl);
|
||||
testDataUrl(dataUrl, 'emboss filter', 'problem with emboss filter.');
|
||||
};
|
||||
imageObj.src = '../assets/darth-vader.jpg';
|
||||
//imageObj.src = '../assets/lion.png';
|
||||
},
|
||||
'edge detection filter': function(containerId) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 10,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
//darth.setFilter(Kinetic.Filters.DetectHorizontalEdge);
|
||||
//darth.setFilter(Kinetic.Filters.DetectVerticalEdge);
|
||||
//darth.setFilter(Kinetic.Filters.DetectDiagonal45Edge);
|
||||
//darth.setFilter(Kinetic.Filters.DetectDiagonal135Edge);
|
||||
darth.setFilter(Kinetic.Filters.DetectEdges);
|
||||
layer.draw();
|
||||
var dataUrl = layer.toDataURL();
|
||||
//console.log(dataUrl);
|
||||
testDataUrl(dataUrl, 'edge detection filter', 'problem with edge detection filter.');
|
||||
};
|
||||
imageObj.src = '../assets/darth-vader.jpg';
|
||||
//imageObj.src = '../assets/lion.png';
|
||||
},
|
||||
'lighten filter': function(containerId) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 10,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
darth.setFilter(Kinetic.Filters.Lighten);
|
||||
layer.draw();
|
||||
var dataUrl = layer.toDataURL();
|
||||
//console.log(dataUrl);
|
||||
testDataUrl(dataUrl, 'lighten filter', 'problem with lighten filter.');
|
||||
};
|
||||
imageObj.src = '../assets/darth-vader.jpg';
|
||||
//imageObj.src = '../assets/lion.png';
|
||||
},
|
||||
'darken filter': function(containerId) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
darth = new Kinetic.Image({
|
||||
x: 10,
|
||||
y: 10,
|
||||
image: imageObj,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(darth);
|
||||
stage.add(layer);
|
||||
darth.setFilter(Kinetic.Filters.Darken);
|
||||
layer.draw();
|
||||
var dataUrl = layer.toDataURL();
|
||||
//console.log(dataUrl);
|
||||
testDataUrl(dataUrl, 'darken filter', 'problem with darken filter.');
|
||||
};
|
||||
imageObj.src = '../assets/darth-vader.jpg';
|
||||
//imageObj.src = '../assets/lion.png';
|
||||
|
||||
Reference in New Issue
Block a user