Combining effects/filters using Pixastic

Question

I was using Pixastic to change simple effects like brightness and contrast of an image on a canvas.

However, I have not been able to find a way to apply these effects together. E.g. Applying brightness then applying a contrast on this already brightened image, not the original image.

Using Pixastic.revert(img); does not work since it applies each effect to the original image instead of layering them.

I am not even sure this is possible with Pixastic since I have not been able to find a solution to this for weeks now.

Is there any other jquery plugin that does similar things like changing brightness and contrast of an image. I need to get this to work for IE9+ so my options are very limited. Most things seem to only work for Chrome/Opera/Safari etc.

Answer 1

Take a look at CamanJS.

On their docs there is the following example:

Caman("#image-id", function () {
  this.brightness(10);
  this.contrast(20);
  this.render(function () {
    alert("Done!");
  });
});

This library uses a hidden canvas, and after rendering, it resets src attribure of img tag in base64 format.

And yes, it works with IE9+

You can view examples here.