lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-05-02 20:05:08 +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
* @methodOf Kinetic.Image.prototype
* @param {Object} config
* @param {Function} config.filter filter function
* @param {Function} [config.callback] callback function to be called once
* @param {Function} filter filter function
* @param {Object} [config] optional config object used to configure filter
* @param {Function} [callback] callback function to be called once
* 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 context = canvas.getContext();
context.drawImage(this.attrs.image, 0, 0);
try {
var imageData = context.getImageData(0, 0, canvas.getWidth(), canvas.getHeight());
config.filter(imageData, config.config);
filter(imageData, config);
var that = this;
Kinetic.Type._getImage(imageData, function(imageObj) {
that.setImage(imageObj);
if(config.callback) {
config.callback();
if(callback) {
callback();
}
});
}

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