Search code examples
javascripthtmlhtml5-canvasphotoshopcamanjs

CamanJS Filters to Photoshop Curves

Is there a way to obtain the photoshop curves of a CamanJS filter?

for example:

Caman.Filter.register("hemingway", function() {
this.greyscale();
this.contrast(10);
this.gamma(0.9);
this.newLayer(function() {
  this.setBlendingMode("multiply");
  this.opacity(40);
  this.copyParent();
  this.filter.exposure(15);
  this.filter.contrast(15);
  return this.filter.channels({
    green: 10,
    red: 5
  });
});
this.sepia(30);
this.curves('rgb', [0, 10], [120, 90], [180, 200], [235, 255]);
this.channels({
  red: 5,
  green: -2
});
return this.exposure(15);
});

I tried to use those curves values, but don't seem to be the same.

Any insight?

Thank you.

Solution

  • The main reason is that camanjs uses Bezier curves for its curve() method, while Photoshop uses something like a Cardinal spline or a simpler Catmull-Rom spline (splines which passes through the actual points).

    For this reason it will also be complex to convert the Bezier control points to a cardinal spline, and vice versa.

    You can make a mapping interface so you can draw the Bezier, then provide points for a cardinal spline, move them around so that they closely matches the curve made by the Bezier, and use those for Photoshop. I have made an cardinal spline implementation here, there may be others out there if you feel this could be one way of solving it.

    But in general, you would have to convert between the two types.

    Update

    This code (not JS but C) (FitCurves.c) may or may not help you with curve-fitting the Bezier. C and JS are closely related syntax-wise so it should be easy to translate.

    Hope this helps.