2

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.

Alex Tartan
  • 6,736
  • 10
  • 34
  • 45
sudo
  • 79
  • 1
  • 7
  • Did you consider [CSS3](http://html5-demos.appspot.com/static/css/filters/index.html) instead of Canvas? CSS3 is much faster – Oleg Jun 08 '15 at 16:12
  • Yes, I did, but it does not work for IE. – sudo Jun 08 '15 at 16:15
  • I have just tried applying brightness and contrast both together ( `Pixastic.process(img, "brightness", {brightness:50,contrast:0.5});` ), and it seems to work fine. The same goes to calling `process` method twice with differect arguments. There is an example on [this page](http://dph.am/pixastic-docs/docs/actions/brightness/). – Oleg Jun 08 '15 at 17:52
  • I saw that, but I couldn't find a way to use that with range sliders. For example, if I slide to brightness 20 and then to 10, it applies brightness of 10 to the already brightened image instead of bringing it down to 10. And revert removes say, a contrast and lighten effect I applied before the brightness effect. Even if I note down what the value of the contrast slider and the value of the lightness slider is, the order they were applied in makes a difference. So I need to keep track of this order as well. – sudo Jun 09 '15 at 13:17
  • Now I understand you :) When I faced the same problem, I solved it a bit different way. Instead of range sliders I used buttons "add more contrast", "add more brightness", ..., and finally "revert all". Of course, range sliders would be much better, but in my case the above solution was acceptable. – Oleg Jun 09 '15 at 14:17

1 Answers1

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.

Oleg
  • 22,300
  • 9
  • 68
  • 84