CODEWITHSUNDEEP
javascriptimage-processingcanvaspixel-manipulationimage-effects
Noah Wilson
Noah Wilson

Reputation: 33

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

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

Upvotes: 0

Views: 214

Answers (0)

Related Questions