-1

I'd like to edit HSL of an image via Javascript, not as a whole of (although it would be somehow helpful) but for each set of colors (Blues,Yellows...), like in photoshop.

  • Which is the data structure I must use ?
  • Which are the formulas for mapping this colors ?
  • Is there any helpful library for that ?

Thanks!

enter image description here

Lau Llobet
  • 577
  • 7
  • 21
  • calling [`canvas.getImageData()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData) method will give you an `ImageData` object containing all the raw pixels r,g,b,a values in a TypedArray. From there, you can [convert these values to hsl](http://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion), do your edit, convert back to rgba and then `putImageData()` the modified imageData – Kaiido Apr 19 '16 at 12:34
  • Thanks Kaiido it eases part of the process but i'm wandering which is the algorithm of mapping used by Photoshop to map i.e. blues into another Hue type, take a look at the color bars in the bottom of the sliders window in the example image. – Lau Llobet Apr 19 '16 at 12:57

1 Answers1

1

You can do this using a combination of blending mode and pixel iteration:

  • Extract the bitmap and iterate over each pixel
  • For each pixel, determine if it's within a certain range (ie. "blues") on the HSL color wheel. You would also need to use variable width, that is, at the edges the intensity is lower than in the center. Remove pixels that aren't in the range.
  • Put back the bitmap to a new canvas with the resulting bitmap
  • Use fill style set to destination HSL value (you can use HSL directly with fill-style, ie. "ctx.fillStyle = "hsl(180,100%,50%)") and fill the entire canvas using compositing mode "destination-over" which will change the overall color.
  • Change blending mode on main canvas to "color" and draw the extracted pixel canvas on top.