lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-05-04 04:57:59 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

applyFilter() method now takes in a required filter function, and an optional config and callback function, rather than a config object

Browse Source
This commit is contained in:
Eric Rowell 2012-11-15 21:51:33 -08:00
parent 0db40018af
commit 383a039def
2 changed files with 31 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/shapes/Image.js
View File

@ -72,23 +72,24 @@ Kinetic.Image.prototype = {
* @name applyFilter * @name applyFilter
* @methodOf Kinetic.Image.prototype * @methodOf Kinetic.Image.prototype
* @param {Object} config * @param {Object} config
* @param {Function} config.filter filter function * @param {Function} filter filter function
* @param {Function} [config.callback] callback function to be called once * @param {Object} [config] optional config object used to configure filter
* @param {Function} [callback] callback function to be called once
* filter has been applied * filter has been applied
*/ */
applyFilter: function(config) { applyFilter: function(filter, config, callback) {
var canvas = new Kinetic.Canvas(this.attrs.image.width, this.attrs.image.height); var canvas = new Kinetic.Canvas(this.attrs.image.width, this.attrs.image.height);
var context = canvas.getContext(); var context = canvas.getContext();
context.drawImage(this.attrs.image, 0, 0); context.drawImage(this.attrs.image, 0, 0);
try { try {
var imageData = context.getImageData(0, 0, canvas.getWidth(), canvas.getHeight()); var imageData = context.getImageData(0, 0, canvas.getWidth(), canvas.getHeight());
config.filter(imageData, config.config); filter(imageData, config);
var that = this; var that = this;
Kinetic.Type._getImage(imageData, function(imageObj) { Kinetic.Type._getImage(imageData, function(imageObj) {
that.setImage(imageObj); that.setImage(imageObj);
if(config.callback) { if(callback) {
config.callback(); callback();
} }
}); });
} }

26
tests/js/unit/shapes/imageTests.js
View File

@ -147,14 +147,11 @@ Test.Modules.IMAGE = {
test(darth.getWidth() === 438, 'image width should be 438'); test(darth.getWidth() === 438, 'image width should be 438');
test(darth.getHeight() === 300, 'image height should be 300'); test(darth.getHeight() === 300, 'image height should be 300');
darth.applyFilter({ darth.applyFilter(Kinetic.Filters.Grayscale, null, function() {
filter: Kinetic.Filters.Grayscale,
callback: function() {
layer.draw(); layer.draw();
var dataUrl = layer.toDataURL(); var dataUrl = layer.toDataURL();
//console.log(dataUrl); //console.log(dataUrl);
warn(dataUrl === dataUrls['Filters - grayscale image'], 'problem with Grayscale filter.'); warn(dataUrl === dataUrls['Filters - grayscale image'], 'problem with Grayscale filter.');
}
}); });
}; };
imageObj.src = '../assets/darth-vader.jpg'; imageObj.src = '../assets/darth-vader.jpg';
@ -183,14 +180,12 @@ Test.Modules.IMAGE = {
test(darth.getWidth() === 438, 'image width should be 438'); test(darth.getWidth() === 438, 'image width should be 438');
test(darth.getHeight() === 300, 'image height should be 300'); test(darth.getHeight() === 300, 'image height should be 300');
darth.applyFilter({ darth.applyFilter(Kinetic.Filters.Invert, null, function() {
filter: Kinetic.Filters.Invert,
callback: function() {
layer.draw(); layer.draw();
var dataUrl = layer.toDataURL(); var dataUrl = layer.toDataURL();
//console.log(dataUrl); //console.log(dataUrl);
//warn(dataUrl === dataUrls['Filters - invert image'], 'problem with Invert filter.'); //warn(dataUrl === dataUrls['Filters - invert image'], 'problem with Invert filter.');
}
}); });
}; };
imageObj.src = '../assets/darth-vader.jpg'; imageObj.src = '../assets/darth-vader.jpg';
@ -219,17 +214,14 @@ Test.Modules.IMAGE = {
test(darth.getWidth() === 438, 'image width should be 438'); test(darth.getWidth() === 438, 'image width should be 438');
test(darth.getHeight() === 300, 'image height should be 300'); test(darth.getHeight() === 300, 'image height should be 300');
darth.applyFilter({ darth.applyFilter(Kinetic.Filters.Brighten, {
filter: Kinetic.Filters.Brighten,
config: {
val: 100 val: 100
}, }, function() {
callback: function() {
layer.draw(); layer.draw();
var dataUrl = layer.toDataURL(); var dataUrl = layer.toDataURL();
//console.log(dataUrl); //console.log(dataUrl);
warn(dataUrl === dataUrls['Filters - adjust image brightness'], 'problem with Brighten filter.'); warn(dataUrl === dataUrls['Filters - adjust image brightness'], 'problem with Brighten filter.');
}
}); });
}; };
imageObj.src = '../assets/darth-vader.jpg'; imageObj.src = '../assets/darth-vader.jpg';
@ -265,13 +257,11 @@ Test.Modules.IMAGE = {
test(darth.getWidth() === 438, 'image width should be 438'); test(darth.getWidth() === 438, 'image width should be 438');
test(darth.getHeight() === 300, 'image height should be 300'); test(darth.getHeight() === 300, 'image height should be 300');
darth.applyFilter({ darth.applyFilter(Kinetic.Filters.Grayscale, null, function() {
filter: Kinetic.Filters.Grayscale,
callback: function() {
//stage.start(); //stage.start();
layer.draw(); layer.draw();
warn(layer.toDataURL() === urls[0], 'data url is incorrect'); warn(layer.toDataURL() === urls[0], 'data url is incorrect');
}
}); });
}; };
imageObj.src = '../assets/darth-vader.jpg'; imageObj.src = '../assets/darth-vader.jpg';