How can I transform a CamanJS Filter into a KineticJS Filter?

Question

From CamanJS given the following filter:

Caman.Filter.register("lomo", function(vignette) {
    if (vignette == null) {
      vignette = true;
    }
    this.brightness(15);
    this.exposure(15);
    this.curves('rgb', [0, 0], [200, 0], [155, 255], [255, 255]);
    this.saturation(-20);
    this.gamma(1.8);
    if (vignette) {
      this.vignette("50%", 60);
    }
    return this.brightness(5);
  });

How can I transform this filter into a KineticJS equivalent?

Answer 1

CamanJS and KineticJS filters are achieved very differently.

KineticJS filters manipulate pixel data in a single pass.

CamanJS uses subsystems that change the image incrementally (subsystems==this.brightness, this.exposure, etc).

Therefore, there is no simple way to convert a CamanJS filter into a KineticJS filter

To do it you would have to refactor and embed many CamanJS subsystems into KineticJS.

You could do that since both CamanJS and KineticJS are open source with liberal licensing, but it would mean refactoring and adding at least the following subsystems (and their dependencies) into KineticJS from CamanJSs: https://github.com/meltingice/CamanJS/blob/master/dist/caman.full.js

• brightness,
• exposure,
• curves,
• saturation,
• gamma

Perhaps a better idea would be to apply your filter using CamanJS on an in-memory canvas. Then you could use that in-memory canvas as an image source for a Kinetic.Image. Here's a link on how to do that: KineticJS canvas modified by CamanJS