From e631eff6b447dc8f95b025d446bc84e723f423ad Mon Sep 17 00:00:00 2001 From: ippo615 Date: Sun, 4 Aug 2013 14:02:17 -0400 Subject: [PATCH] Cleaned convolve pack, separated filter tests. I removed the ability to do a convolution with a 1D matrix because I was using all 2D matrices. I also cleaned up some unused variables and filters. I took the entire group of tests dealing with image filters and put them into `filterTests.html` and `filterTests.js`. I removed them from `visualTests.js`. --- src/filters/ConvolvePack.js | 246 ++++----------- tests/html/filterTests.html | 26 ++ tests/html/index.html | 3 +- tests/js/filterTests.js | 552 +++++++++++++++++++++++++++++++++ tests/js/visualTests.js | 598 ------------------------------------ 5 files changed, 645 insertions(+), 780 deletions(-) create mode 100644 tests/html/filterTests.html create mode 100644 tests/js/filterTests.js diff --git a/src/filters/ConvolvePack.js b/src/filters/ConvolvePack.js index 4ceeda2f..bf522041 100644 --- a/src/filters/ConvolvePack.js +++ b/src/filters/ConvolvePack.js @@ -14,104 +14,45 @@ // 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, + var matrixSizeX = matrix.length, + matrixSizeY = matrix[0].length, matrixMidX = Math.floor(matrix.length/2), - matrixMidY = Math.floor(matrix.length/2); - - // 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); + 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 - if( is2D ){ - for( y=0; y0)?px:-px; - py = (y+i-matrixMidY) % imageSizeY; - py = (py>0)?py:-py; - //pos = ((y+j)*imageSizeX+x+i)*4; - // get the pixel - 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; - } - } - } - // Handle the 1D matrix - else{ - // WARNING: THIS NEEDS TO BE UPDATED!!! TO HANDLE TILING - // Horizontal pass (ie convolving every row of the image) - for( y=0; y0)?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]; } - - // 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; } + + // Store the result + pos = (y*imageSizeX+x)*4; + result[pos+0] = r; + result[pos+1] = g; + result[pos+2] = b; + //result[pos+3] = a; } } @@ -131,7 +72,7 @@ return Math.pow(Math.E, -dx*dx / (2*sigma*sigma)); }; - var make_blur_kernel = function( size, scale ){ + var make_blur_kernel = function( size, scale, sigma ){ // make sure size is odd: if( size % 2 === 0 ){ size += 1; } @@ -142,7 +83,7 @@ for( i=0; i + + + + + + + + + + + + diff --git a/tests/html/index.html b/tests/html/index.html index d3bffd37..db2a9e89 100644 --- a/tests/html/index.html +++ b/tests/html/index.html @@ -7,9 +7,10 @@
  • Unit Tests (724)
  • Functional Tests (171)
  • Visual Tests (46)
    • +
  • Filter Tests
  • Manual Tests
  • Performance Tests
  • Special Tests
    • - \ No newline at end of file + diff --git a/tests/js/filterTests.js b/tests/js/filterTests.js new file mode 100644 index 00000000..f366c9ed --- /dev/null +++ b/tests/js/filterTests.js @@ -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'; + } +}; + diff --git a/tests/js/visualTests.js b/tests/js/visualTests.js index b030ca4b..958b946e 100644 --- a/tests/js/visualTests.js +++ b/tests/js/visualTests.js @@ -1240,604 +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(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'; - }, - '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); - 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'; - }, - '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); - 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, 'edge detection filter', 'problem with edge detection 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({