How can I achieve simple pixel manipulations in canvas like enhance shadow/highlight or make an image warmer/cooler?

206 Views Asked by At

I'm building an image editor using canvas, similar to what you might see in instagram or iphone's default photo editor. So far I've been able to implement the ability to do the following - sharpen, blur, contrast, brighten, tint, saturate, adjust hue. These have been straight forward to implement because there's plenty of solutions you can quickly find googling.

However I've been unable to find anything related to shadows/highlights or warmth/cooling.

For example - a solution to adjusting brightness would be similar to this

var imageData = context.getImageData(0, 0, img.width, img.height);
var data = imageData.data;

var brightness = 1.35;

for(var i = 0; i < data.length; i += 4)
{
    var r = data[i];
    var g = data[i + 1];
    var b = data[i + 2];

    bR = brightness * r;
    bG = brightness * g;
    bB = brightness * b;

    data[i] = bR;
    data[i + 1] = bG;
    data[i + 2] = bB;
}
context.putImageData(imageData, 0, 0);

How could I do something similar for shadows/highlights and warmth/cooling

0

There are 0 best solutions below