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

resolving conflicts

Browse Source
This commit is contained in:
Eric Rowell
2013-08-11 21:36:18 -07:00
parent d49ae15207 08abb22072
commit a4172088f1
9 changed files with 811 additions and 988 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Gruntfile.js
View File

@@ -40,9 +40,9 @@ module.exports = function(grunt) {
'src/filters/Brighten.js',
'src/filters/Invert.js',
'src/filters/Blur.js',
'src/filters/Mask.js'/*,
'src/filters/Colors.js',
'src/filters/Convolution.js'*/
'src/filters/Mask.js',
'src/filters/ColorPack.js',
'src/filters/ConvolvePack.js'
];
var unitTestFiles = [

12
src/filters/Colors.js → src/filters/ColorPack.js
View File

@@ -80,13 +80,14 @@
};
/**
* shift hue
* Shift Hue Filter.
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
Kinetic.Filters.ShiftHue = function(imageData) {
shift_hue(imageData,this.getFilterHueShiftDeg());
shift_hue(imageData, this.getFilterHueShiftDeg() % 360 );
};
Kinetic.Node.addFilterGetterSetter(Kinetic.Image, 'filterHueShiftDeg', 0);
@@ -106,10 +107,12 @@
/**
* colorizes the image so that it is just varying shades of the specified color
* Colorize Filter.
* colorizes the image so that it is just varying shades of the specified color
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
Kinetic.Filters.Colorize = function(imageData) {
var data = imageData.data;
@@ -119,7 +122,7 @@
hsl = rgb_to_hsl(color[0],color[1],color[2]),
hue = hsl[0];
// Color it red
// Color it red, by removing green and blue
for(var i = 0; i < data.length; i += 4) {
data[i + 1] = 0;
data[i + 2] = 0;
@@ -146,3 +149,4 @@
*/
})();

393
src/filters/Convolution.js
View File

@@ -1,393 +0,0 @@
(function() {
var convolve_internal = function(imageData,matrix){
// Input data
var pixels = imageData.data,
imageSizeX = imageData.width,
imageSizeY = imageData.height,
nPixels = imageSizeX*imageSizeY,
pixel;
// An array for storing the result
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...)
var is2D = (matrix[0].length > 0) || 0,
matrixSizeX = matrix.length,
matrixSizeY = matrix.length;
// Make sure we don't try to access pixels outside the image
var xMax = Math.floor(imageSizeX - matrixSizeX/2),
xMin = Math.floor(matrixSizeX/2),
yMax = Math.floor(imageSizeY - matrixSizeY/2),
yMin = Math.floor(matrixSizeY/2);
// 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){
// Perform the convolution
r = 0; g = 0; b = 0; a = 0;
for( i=0; i<matrixSizeX; i+=1){
for( j=0; j<matrixSizeY; j+=1){
pos = ((y+j)*imageSizeX+x+i)*4;
r += matrix[j][i]*pixels[pos+0];
g += matrix[j][i]*pixels[pos+1];
b += matrix[j][i]*pixels[pos+2];
//a += matrix[j][i]*pixels[pos+3];
}
}
// Store the result
pos = (y*imageSizeX+x)*4;
result[pos+0] = r;
result[pos+1] = g;
result[pos+2] = b;
//result[pos+3] = a;
}
}
}
// Handle the 1D matrix
else{
// Horizontal pass (ie convolving every row of the image)
for( y=0; y<imageSizeY; y+=1){
for( x=xMin; x<xMax; x+=1){
pos = (y*imageSizeX+x)*4;
// Perform the convolution
r = 0; g = 0; b = 0; a = 0;
for( j=0; j<matrixSizeX; j+=1){
pos += 4;
r += matrix[j]*pixels[pos+0];
g += matrix[j]*pixels[pos+1];
b += matrix[j]*pixels[pos+2];
//a += matrix[j]*pixels[pos+3];
}
// Multiply by 1/2 because the other 1/2 comes from the vertical pass
pos = (y*imageSizeX+x)*4;
result[pos+0] = r*0.5;
result[pos+1] = g*0.5;
result[pos+2] = b*0.5;
//result[pos+3] = a*0.5;
}
}
// Vertical pass (ie convolving every column of the image)
for( x=0; x<imageSizeX; x+=1){
for( y=yMin; y<yMax; y+=1){
pos = (y*imageSizeX+x)*4;
// Perform the convolution
r = 0; g = 0; b = 0; a = 0;
for( j=0; j<matrixSizeX; j+=1){
pos += 4*imageSizeX;
r += matrix[j]*pixels[pos+0];
g += matrix[j]*pixels[pos+1];
b += matrix[j]*pixels[pos+2];
//a += matrix[j]*pixels[pos+3];
}
// Multiply by 1/2 and add to horizontal pass results
pos = (y*imageSizeX+x)*4;
result[pos+0] += r*0.5;
result[pos+1] += g*0.5;
result[pos+2] += b*0.5;
//result[pos+3] += a*0.5;
}
}
}
// 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];
}
};
// 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));
};
var make_blur_kernel = function( size, scale ){
// make sure size is odd:
if( size % 2 === 0 ){ size += 1; }
// Generate the kernel, we can just multiply 2 single dimensional
// gaussians to get a 2D guassian
var kernel = [], i,j, row;
for( i=0; i<size; i+=1 ){
row = [];
for( j=0; j<size; j+=1 ){
row.push( scale * gaussian(i,size/2,1) * gaussian(j,size/2,1) );
}
kernel.push(row);
}
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
// with the blur negated). We can achieve this by negating
// blur kernel, and adding twice the identity to that kernel.
var kernel = make_blur_kernel( size, -blur_percent / 100 ),
mid = Math.floor(size/2);
kernel[mid][mid] += 2;
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
* @memberof Kinetic.Filters
* @param {Object} imageData
*/
Kinetic.Filters.UnsharpMask = function(imageData) {
convolve_internal(imageData,
make_unsharp_kernel(
this.getFilterSoftBlurSize(),
this.getFilterSoftBlurAmount()
)
);
};
/**
* soft blur
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
*/
Kinetic.Filters.SoftBlur = function(imageData) {
convolve_internal(imageData,
make_soft_blur_kernel(
this.getFilterSoftBlurSize(),
this.getFilterSoftBlurAmount()
)
);
};
Kinetic.Node.addFilterGetterSetter(Kinetic.Image, 'filterSoftBlurAmount', 60);
/**
* get the soft blur amount
* @name getFilterSoftBlurAmount
* @method
* @memberof Kinetic.Image.prototype
*/
/**
* set the soft blur amount. 0 = no blur, 100 = full blur
* @name setFilterSoftBlurAmount
* @method
* @memberof Kinetic.Image.prototype
*/
Kinetic.Node.addFilterGetterSetter(Kinetic.Image, 'filterSoftBlurSize', 3);
/**
* get the soft blur size
* @name getFilterSoftBlurSize
* @method
* @memberof Kinetic.Image.prototype
*/
/**
* set the soft blur size in number of pixels
* @name setFilterSoftBlurSize
* @method
* @memberof Kinetic.Image.prototype
*/
/**
* sharpening filter, makes edges more pointed
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
*/
Kinetic.Filters.Sharpen = function(imageData) {
convolve_internal(imageData,[
[ 0,-2, 0],
[-2, 9,-2],
[ 0,-2, 0]
]);
};
/**
* mean removal
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
*/
Kinetic.Filters.RemoveMean = function(imageData) {
convolve_internal(imageData,[
[-1,-1,-1],
[-1, 9,-1],
[-1,-1,-1]
]);
};
/**
* emboss
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
*/
Kinetic.Filters.Emboss = function(imageData) {
convolve_internal(imageData,[
[-2,-1, 0],
[-1, 1, 1],
[ 0, 1, 2]
]);
};
/**
* detects horizontal edges
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
*/
Kinetic.Filters.DetectHorizontalEdges = function(imageData) {
convolve_internal(imageData,[
[-1,-1,-1],
[ 2, 2, 2],
[-1,-1,-1]
]);
};
/**
* detects vertical edges
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
*/
Kinetic.Filters.DetectVerticalEdges = function(imageData) {
convolve_internal(imageData,[
[-1, 2,-1],
[-1, 2,-1],
[-1, 2,-1]
]);
};
/**
* detects 45* angle edges
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
*/
Kinetic.Filters.DetectDiagonal45Edges = function(imageData) {
convolve_internal(imageData,[
[-1,-1, 2],
[-1, 2,-1],
[ 2,-1,-1]
]);
};
/**
* detects 135* angle edges
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
*/
Kinetic.Filters.DetectDiagonal135Edges = function(imageData) {
convolve_internal(imageData,[
[ 2,-1,-1],
[-1, 2,-1],
[-1,-1, 2]
]);
};
/**
* detects edges
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
*/
Kinetic.Filters.DetectEdges = function(imageData) {
convolve_internal(imageData,[
[-1,-1,-1],
[-1, 8,-1],
[-1,-1,-1]
]);
};
/**
* makes image lighter
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
*/
Kinetic.Filters.Lighten = function(imageData) {
convolve_internal(imageData,[
[ 0, 0, 0],
[ 0,1.2, 0],
[ 0, 0, 0]
]);
};
/**
* makes image darker
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
*/
Kinetic.Filters.Darken = function(imageData) {
convolve_internal(imageData,[
[ 0, 0, 0],
[ 0,0.8, 0],
[ 0, 0, 0]
]);
};
})();

215
src/filters/ConvolvePack.js Normal file
View File

@@ -0,0 +1,215 @@
(function() {
var convolve_internal = function(imageData,matrix){
// Input data
var pixels = imageData.data,
imageSizeX = imageData.width,
imageSizeY = imageData.height,
nPixels = imageSizeX*imageSizeY,
pixel;
// An array for storing the result
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...)
var matrixSizeX = matrix.length,
matrixSizeY = matrix[0].length,
matrixMidX = Math.floor(matrix.length/2),
matrixMidY = Math.floor(matrix[0].length/2);
// Accumlators and positions for iterating
var r,g,b,a, x,y, px,py, pos, i,j;
// Handle the 2D matrix
for( y=0; y<imageSizeY; y+=1){
for( x=0; x<imageSizeX; x+=1){
// Perform the convolution
r = 0; g = 0; b = 0; a = 0;
for( i=0; i<matrixSizeX; i+=1){
for( j=0; j<matrixSizeY; j+=1){
// tile the image to account for pixels past the
// edge (and make sure they are positive)
px = (x+i-matrixMidX) % imageSizeX;
px = (px>0)?px:-px;
py = (y+i-matrixMidY) % imageSizeY;
py = (py>0)?py:-py;
// get the pixel and convolve
pos = (py*imageSizeX + px)*4;
r += matrix[j][i]*pixels[pos+0];
g += matrix[j][i]*pixels[pos+1];
b += matrix[j][i]*pixels[pos+2];
//a += matrix[j][i]*pixels[pos+3];
}
}
// Store the result
pos = (y*imageSizeX+x)*4;
result[pos+0] = r;
result[pos+1] = g;
result[pos+2] = b;
//result[pos+3] = a;
}
}
// 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];
}
};
// 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));
};
var make_blur_kernel = function( size, scale, sigma ){
// make sure size is odd:
if( size % 2 === 0 ){ size += 1; }
// Generate the kernel, we can just multiply 2 single dimensional
// gaussians to get a 2D guassian
var kernel = [], i,j, row;
for( i=0; i<size; i+=1 ){
row = [];
for( j=0; j<size; j+=1 ){
row.push( scale * gaussian(i,size/2,sigma) * gaussian(j,size/2,sigma) );
}
kernel.push(row);
}
return kernel;
};
var make_edge_detect_kernel = function( size, scale, sigma ){
// make sure size is odd:
if( size % 2 === 0 ){ size += 1; }
// Create a difference-of-gaussians kernel (by subtracting gaussians)
// 1.6 is a good sigma ratio to approximate a laplacian of gaussian
var kernel = [], i,j, row, g;
for( i=0; i<size; i+=1 ){
row = [];
for( j=0; j<size; j+=1 ){
g1 = gaussian(i,size/2,sigma) * gaussian(j,size/2,sigma);
g2 = gaussian(i,size/2,sigma*1.6) * gaussian(j,size/2,sigma*1.6);
row.push( scale * (g2-g1) );
}
kernel.push(row);
}
return kernel;
};
var make_soft_blur_kernel = function( size, 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, percent, 1 ),
mid = Math.floor(size/2);
kernel[mid][mid] += 1-percent;
return kernel;
};
var make_unsharp_kernel = function( size, percent ){
// An 'unsharp mask' is made by blurring the inverted image
// and combining it with the original (like a soft blur but
// with the blur negated). We can achieve this by negating
// blur kernel, and adding twice the identity to that kernel.
var kernel = make_blur_kernel( size, -percent, 1 ),
mid = Math.floor(size/2);
kernel[mid][mid] += 1+percent;
return kernel;
};
Kinetic.Node.addFilterGetterSetter(Kinetic.Image, 'filterAmount', 50);
/**
* get the current filter amount
* @name getFilterAmount
* @method
* @memberof Kinetic.Image.prototype
*/
/**
* set the current filter amount 0 = no filter, 100 = max filter
* @name setFilterAmount
* @method
* @memberof Kinetic.Image.prototype
*/
/**
* Unsharp Mask Filter.
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
Kinetic.Filters.UnsharpMask = function(imageData) {
convolve_internal(imageData,
make_unsharp_kernel(5,this.getFilterAmount()/100)
);
};
/**
* Soft Blur Filter.
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
Kinetic.Filters.SoftBlur = function(imageData) {
convolve_internal(imageData,
make_soft_blur_kernel(5,this.getFilterAmount()/100)
);
};
/**
* Edge Filter.
* Makes edges more noticable.
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
Kinetic.Filters.Edge = function(imageData) {
var s = this.getFilterAmount()/100;
if( s === 0 ){ return; }
convolve_internal(imageData,[
[ 0, -1*s, 0],
[-1*s,(1-s)+4*s,-1*s],
[ 0, -1*s, 0]
]);
};
/**
* Emboss Filter.
* Makes the image apear to have some depth.
* @function
* @memberof Kinetic.Filters
* @param {Object} imageData
* @author ippo615
*/
Kinetic.Filters.Emboss = function(imageData) {
var s = this.getFilterAmount()/100;
if( s === 0 ){ return; }
convolve_internal(imageData,[
[-1*s,-0.5*s, 0],
[-0.5*s,1+0.5*s, 0.5*s],
[ 0, 0.5*s, 1*s]
]);
};
})();

26
tests/html/filterTests.html Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
/* overwrite CSS */
</style>
<link rel="stylesheet" type="text/css"href="../base.css">
<script src="../../dist/kinetic-v0.0.0.js"></script>
<script src="../assets/dataUrls.js"></script>
<script src="../js/Test.js"></script>
<script src="../js/filterTests.js"></script>
<script>
window.onload = function() {
var test = new Test();
test.run();
document.getElementsByTagName('body')[0].addEventListener('mousemove', function(evt) {
//console.log(evt.clientX + ',' + evt.clientY);
}, false);
};
</script>
</head>
<body></body>
</html>

9
tests/html/index.html
View File

@@ -4,12 +4,13 @@
<h1>KineticJS Test Suite</h1>
<p>atomated test counts updated on 08-10-2013</p>
<ul>
<li><a href="unitTests.html">Unit Tests (793)</a></li>
<li><a href="functionalTests.html">Functional Tests (172)</a></li>
<li><a href="visualTests.html">Visual Tests (53)</a></li>
<li><a href="unitTests.html">Unit Tests</a></li>
<li><a href="functionalTests.html">Functional Tests</a></li>
<li><a href="visualTests.html">Visual Tests</a></li>
<li><a href="filterTests.html">Filter Tests</a></li>
<li><a href="manualTests.html">Manual Tests</a></li>
<li><a href="performanceTests.html">Performance Tests</a></li>
<li><a href="special/index.html">Special Tests</a></li>
</ul>
</body>
</html>
</html>

4
tests/html/performanceTests.html
View File

@@ -8,7 +8,7 @@
<script src="../js/performanceTests.js"></script>
<!-- versions -->
<!--
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.2.min.js"></script>
<script>
run(Kinetic);
@@ -28,7 +28,7 @@
<script>
run(Kinetic);
</script>
-->
<script src="../../dist/kinetic-dev.js"></script>
<script>
run(Kinetic);

552
tests/js/filterTests.js Normal file
View File

@@ -0,0 +1,552 @@
Test.Modules.IMAGE = {
'crop add and scale image': 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: 200,
y: 75,
image: imageObj,
width: 107,
height: 75,
crop: [186, 211, 292 - 186, 285 - 211],
draggable: true,
scale: [0.5, 0.5]
});
layer.add(darth);
stage.add(layer);
//console.log(layer.toDataURL());
testDataUrl(layer.toDataURL(), 'crop and scale image', 'problem rendering cropped and scaled image');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'create image hit region': function(containerId) {
var imageObj = new Image();
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
imageObj.onload = function() {
var lion = new Kinetic.Image({
x: 200,
y: 40,
image: imageObj,
draggable: true,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [20, 20],
shadowOpacity: 0.2
});
// override color key with black
lion.colorKey = '000000';
layer.add(lion);
lion.createImageHitRegion(function() {
stage.add(layer);
layer.drawHit();
var hitDataUrl = layer.hitCanvas.toDataURL();
//console.log(hitDataUrl);
testDataUrl(hitDataUrl,'transparent image hit render', 'problem rendering image on hit graph');
});
};
imageObj.src = '../assets/lion.png';
showHit(layer);
},
'grayscale image': 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({
throttle: 999
});
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Grayscale);
layer.draw();
testDataUrl(layer.toDataURL(), 'grayscale image', 'problem with Grayscale filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'invert image': 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({
throttle: 999
});
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Invert);
layer.draw();
var dataUrl = layer.toDataURL();
testDataUrl(layer.toDataURL(), 'invert image', 'problem with Invert filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'adjust image brightness': 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({
throttle: 999
});
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Brighten);
darth.setFilterBrightness(100);
layer.draw();
testDataUrl(layer.toDataURL(), 'adjust image brightness', 'problem with Brighten filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'gaussian 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.Blur);
darth.setFilterRadius(10);
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'blur filter', 'problem with Blur filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'colorizing 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.Colorize);
darth.setFilterColorizeColor([255,0,128]);
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'colorizing filter', 'problem with colorizing filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'shift hue 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.ShiftHue);
darth.setFilterHueShiftDeg(360);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 5.0,
filterHueShiftDeg: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'shift hue filter', 'problem with hue shifting filter.');
};
imageObj.src = '../assets/lion.png';
},
'unsharp mask 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.UnsharpMask);
darth.setFilterAmount(100);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 0.6,
filterAmount: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
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.setFilterAmount(100);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 0.6,
filterAmount: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
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';
},
'edge detection filter 1': 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.Edge);
darth.setFilterAmount(100);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 0.6,
filterAmount: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
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';
},
'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);
darth.setFilterAmount(50);
layer.draw();
var tween = new Kinetic.Tween({
node: darth,
duration: 0.6,
filterAmount: 0,
easing: Kinetic.Easings.EaseInOut
});
darth.on('mouseover', function() {
tween.play();
});
darth.on('mouseout', function() {
tween.reverse();
});
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';
},
'filter transformed image': 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({
throttle: 999
});
darth = new Kinetic.Image({
x: 50,
y: 50,
//width: 438,
//height: 300,
image: imageObj,
draggable: true,
rotationDeg: 10,
scale: 0.3
});
darth.setOffset(darth.getWidth() / 2, darth.getHeight() / 2);
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Grayscale);
layer.draw();
//console.log(layer.toDataURL());
testDataUrl(layer.toDataURL(), 'filter transformed image', 'problem filtering transformed image');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'apply shadow to transparent image': function(containerId) {
var imageObj = new Image();
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
imageObj.onload = function() {
var lion = new Kinetic.Image({
x: 200,
y: 40,
image: imageObj,
draggable: true,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [20, 20],
shadowOpacity: 0.2
});
layer.add(lion);
stage.add(layer);
var dataUrl = layer.toDataURL();
testDataUrl(layer.toDataURL(), 'transparent image shadow', 'problem applying shadow to image with transparent pixels');
};
imageObj.src = '../assets/lion.png';
showHit(layer);
},
'mask unicolor background filter': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 600,
height: 200
});
var layer = new Kinetic.Layer({
throttle: 999
});
var bamoon = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
draggable: true
}),
filtered = new Kinetic.Image({
x: 300,
y: 0,
image: imageObj,
draggable: true
});
layer.add(bamoon);
layer.add(filtered);
stage.add(layer);
filtered.setFilter(Kinetic.Filters.Mask);
filtered.setFilterThreshold(10);
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'mask filter', 'problem with Mask filter.');
};
imageObj.src = '../assets/bamoon.jpg';
}
};

582
tests/js/visualTests.js
View File

@@ -1240,588 +1240,6 @@ Test.Modules.BLOB = {
};
Test.Modules.IMAGE = {
'crop add and scale image': 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: 200,
y: 75,
image: imageObj,
width: 107,
height: 75,
crop: [186, 211, 292 - 186, 285 - 211],
draggable: true,
scale: [0.5, 0.5]
});
layer.add(darth);
stage.add(layer);
//console.log(layer.toDataURL());
testDataUrl(layer.toDataURL(), 'crop and scale image', 'problem rendering cropped and scaled image');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'create image hit region': function(containerId) {
var imageObj = new Image();
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
imageObj.onload = function() {
var lion = new Kinetic.Image({
x: 200,
y: 40,
image: imageObj,
draggable: true,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [20, 20],
shadowOpacity: 0.2
});
// override color key with black
lion.colorKey = '000000';
layer.add(lion);
lion.createImageHitRegion(function() {
stage.add(layer);
layer.drawHit();
var hitDataUrl = layer.hitCanvas.toDataURL();
//console.log(hitDataUrl);
testDataUrl(hitDataUrl,'transparent image hit render', 'problem rendering image on hit graph');
});
};
imageObj.src = '../assets/lion.png';
showHit(layer);
},
'grayscale image': 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({
throttle: 999
});
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Grayscale);
layer.draw();
testDataUrl(layer.toDataURL(), 'grayscale image', 'problem with Grayscale filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'invert image': 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({
throttle: 999
});
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Invert);
layer.draw();
var dataUrl = layer.toDataURL();
testDataUrl(layer.toDataURL(), 'invert image', 'problem with Invert filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'adjust image brightness': 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({
throttle: 999
});
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Brighten);
darth.setFilterBrightness(100);
layer.draw();
testDataUrl(layer.toDataURL(), 'adjust image brightness', 'problem with Brighten filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'gaussian 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.Blur);
darth.setFilterRadius(10);
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'blur filter', 'problem with Blur filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'colorizing 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.Colorize);
darth.setFilterColorizeColor([255,0,128]);
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'colorizing filter', 'problem with colorizing filter.');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'shift hue 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.ShiftHue);
darth.setFilterHueShiftDeg(90);
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'shift hue filter', 'problem with hue shifting filter.');
};
imageObj.src = '../assets/lion.png';
},
'unsharp mask 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.UnsharpMask);
darth.setFilterSoftBlurAmount(90);
darth.setFilterSoftBlurSize(7);
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
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';
},
'filter transformed image': 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({
throttle: 999
});
darth = new Kinetic.Image({
x: 50,
y: 50,
//width: 438,
//height: 300,
image: imageObj,
draggable: true,
rotationDeg: 10,
scale: 0.3
});
darth.setOffset(darth.getWidth() / 2, darth.getHeight() / 2);
layer.add(darth);
stage.add(layer);
darth.setFilter(Kinetic.Filters.Grayscale);
layer.draw();
//console.log(layer.toDataURL());
testDataUrl(layer.toDataURL(), 'filter transformed image', 'problem filtering transformed image');
};
imageObj.src = '../assets/darth-vader.jpg';
},
'apply shadow to transparent image': function(containerId) {
var imageObj = new Image();
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
imageObj.onload = function() {
var lion = new Kinetic.Image({
x: 200,
y: 40,
image: imageObj,
draggable: true,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [20, 20],
shadowOpacity: 0.2
});
layer.add(lion);
stage.add(layer);
var dataUrl = layer.toDataURL();
testDataUrl(layer.toDataURL(), 'transparent image shadow', 'problem applying shadow to image with transparent pixels');
};
imageObj.src = '../assets/lion.png';
showHit(layer);
},
'mask unicolor background filter': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 600,
height: 200
});
var layer = new Kinetic.Layer({
throttle: 999
});
var bamoon = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
draggable: true
}),
filtered = new Kinetic.Image({
x: 300,
y: 0,
image: imageObj,
draggable: true
});
layer.add(bamoon);
layer.add(filtered);
stage.add(layer);
filtered.setFilter(Kinetic.Filters.Mask);
filtered.setFilterThreshold(10);
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
testDataUrl(dataUrl, 'mask filter', 'problem with Mask filter.');
};
imageObj.src = '../assets/bamoon.jpg';
}
};
Test.Modules.SPLINE = {
'add splines': function(containerId) {
var stage = new Kinetic.Stage({