How can we adjust levels in HTML5 Canvas?

Question

I've a psd file and I was to create an image in canvas similar to the one in psd. One of the filters applied to the image in Photoshop is "Levels".

I'm using Canvas image manipulation library - CamanJS.

Based on my finding, Levels in Photoshop is color correction in canvas but I don't see any api for that in CamanJS.

Any idea if we can do this? I'm open to any other library if it makes this task easier.

Thanks in advance.

Answer 1

You can use CamanJS to do image adjustments like Photoshop's "levels".

Photoshop "levels" adjustment is actually a combination of 3 main adjustments:

• Brightness
• Contrast
• Color Channels

Here is a CamanJS approximation of Photoshop's level adjustment:

// Combining contrast, brightness & channels
// to simulate a Photoshop "levels" adjustment

Caman("#image", function () {

  this

  // adjust contrast (-100 to 100)

  .contrast(contrastAdjustment)

  // adjust brightness (-100 to 100)

  .brightness(brightnessAdjustment)

  // adjust colors (-100 to 100 for r,g,b)

  .channels({red:5, green: 0, blue: 0})

  // and render the filtered image

  .render();

});

To get Photoshop's ability to clamp these values within a range (like PS's histogram controls), you can start by using CamanJS "curves". But to fine-tune filter effects you would have to create your own custom filter. CamanJS allows you to define custom filters like this:

// create a custom process to clamp Red between low/high values

Caman.Filter.register("ClampRed", function (low,high) {
    this.process("ClampRed", function (rgba) {
        rgba.r = Math.min(low,Math.max(high));
        return rgba;
    });
});