0

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

Noah Wilson
  • 33
  • 1
  • 6
  • Ideally, you don't - the 2d bitmap is CPU-bound and terribly slow. Instead you want to take advantage of the fact that there's also the webgl context, which runs on your much more capable GPU, letting you can write some simple shader code that effects the filter(s) you want. That's not JS, but there are a _lot_ of simple shader tutorials for the web out there to learn from. – Mike 'Pomax' Kamermans Oct 14 '21 at 16:16
  • if you want to achieve adjustments easier, look into converting rgb to hsl for example. You separate the colors from luminance and it is easier to manipulate the pixels. For example you can target much easier colors above a certain luminance., but leave them as they are if they are darker. – J_K Oct 16 '21 at 10:49

0 Answers0