1

The simplest method possible is preferable. I unfortunately don't know much about image manipulation!

Jacob Kelley
  • 395
  • 3
  • 13
  • The answer on this http://stackoverflow.com/questions/24218783/javascript-canvas-pixel-manipulation seems helpful and it has this http://jsfiddle.net/9GLNP/ - It's a little glitchy for me, but reload the page enough and it will work eventually – Henrik Ginnerup Nov 01 '16 at 01:53
  • `canvasContext.getImageData()` and `canvasContext.putImageData()` are what you'll be using if it's based on what's on the canvas already. – StackSlave Nov 01 '16 at 02:40

1 Answers1

3

You can use the globalCompositeOperation ,"hue","saturation","color", and "luminosity"

Where

  • "hue" will change the destination hue to the hue to that of the source.
  • "saturation" will change the destination saturation to that of the source
  • "color" will change the destination color to that of the source.
  • "luminosity" will change the destination luminosity to that of the source

For example if you want to change the image saturation to full saturation

ctx.drawImage(image,0,0); // image to change
ctx.globalCompositeOperation = "saturation";
ctx.fillStyle = "hsl(0,100%,50%)";  // saturation at 100%
ctx.fillRect(0,0,image.width,image.height);  // apply the comp filter
ctx.globalCompositeOperation = "source-over";  // restore default comp

If you want finer control you will have to do it pixel by pixel using getImageData and setimagedata but this can be very slow. For speed you are best to use a webGL filter that will compare to the above comp modes in terms of speed, but the trade off is code complexity.

Blindman67
  • 51,134
  • 11
  • 73
  • 136