0

I am playing around with SVG filters, and there is a problem I have thought about for a long time. I am trying to change the colors of my SVG images (which contain base64 png strings) using filters. It is working well for most objects, but as soon as the object is very dark I get into trouble. See the example below where I am trying to apply a red color filter on an object that is very dark. The dark parts still remain the same dark, but I would like for it to change color to the same red as the background.

Is there any way / formula to apply filters that take into account the darkness of the original object color?

My thoughts so far is to detect the colours in an object and apply fill instead filter if the object is "dark enough", but I really don't like that solution.

enter image description here

enter image description here

Alien13
  • 558
  • 3
  • 8
  • 30
  • RTC has a whole write-up on canvas and other cool features to help with this, I believe too there's recognition code out there too in the demo's to maybe assist with the color stuff. Filters though ezpz, I wish I could post more but it's something I soon venture into for different project at least. – BGPHiJACK May 05 '21 at 09:37
  • That is interesting, is there any link that I can look at? – Alien13 May 05 '21 at 09:51
  • https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter – BGPHiJACK May 05 '21 at 09:54
  • https://jsfiddle.net/xLF38/818/ – BGPHiJACK May 05 '21 at 09:55
  • https://stackoverflow.com/questions/6735470/get-pixel-color-from-canvas-on-mousemove – BGPHiJACK May 05 '21 at 09:56
  • Canvas is the way to go I think and lots of people on it with pixel detection you could count all the squares in 6x6px range and determine a medium of colors. – BGPHiJACK May 05 '21 at 09:57
  • Oh wow, that fiddle was really interesting, do you know if there is a way to see how "single-colored" an image is? Some of my images are both dark and bright, so in those cases I think it is still better to apply a `filter`. It is in the case when the object is dark and "significantly" single-colored that I want to use the `fill`function. – Alien13 May 05 '21 at 10:06
  • Yeah I'd suggest run the grid, either by individual pixels and count each color one by one, and if 1,000,000 blacks cause black will be 100000 ->111111 (to higher depending on your needs) to greens of 700,000 you can assume it's darker the image and filter it. Not sure how you count the pixels but an example there showed revealing color so a loop be all that's needed. – BGPHiJACK May 05 '21 at 10:08
  • Should be simple, for length x width, check each dot. Count and determine with your maths, make it fun/cool! :D – BGPHiJACK May 05 '21 at 10:09
  • Yea this is a very cool problem indeed, I have been thinking so so much about this – Alien13 May 05 '21 at 10:15

0 Answers0