Question

I can add filter to image like here:

// apply grayscale filter to second image
filteredYoda.applyFilter({
    filter: Kinetic.Filters.Grayscale,
    callback: function() {
        layer.draw();
    }
});

, but how I can remove it and get initial image?

UPDATE:
the code that solves the problem:

    imageCanvas.initailImage = imageCanvas.getImage();
    imageCanvas.disconnect = function () {
        imageCanvas.applyFilter({
            filter: Kinetic.Filters.Grayscale,
            callback: function() {
                //imageCanvas.deviceName += " - Disconnected.";
                stage.get('#deviceLayer')[0].draw();
            }
        });
    };
    imageCanvas.connect = function () {
        if (imageCanvas.hasOwnProperty('initailImage')) {
            imageCanvas.setImage(imageCanvas.initailImage);
            stage.get('#deviceLayer')[0].draw();
        }
    };

Answer 1

There doesn’t seem to be any way of doing this at moment. I’ve poked around in the source code of the current version, and I can’t find any function call that would remove a filter.

The filters themselves are actually functions that apply a little bit of maths to the raw image data, so one approach might be to define your own filter which applies the inverse equation. However, it might prove to be impossible to compute the original values without adding extra complexity.

So, if you don’t want try that (and who would blame you..), you could also just make a new Image from the same source and store it separately, to be shown as the filtered image. It’s a little tiresome, and unfortunately the clone method doesn’t work properly right now either (you’ll get a reference to the same variable), but it might be the simplest approach.

And finally, of course, you might prefer to wait for more filter support to be implemented. I couldn’t tell you when this might happen, though.