I am currently working on a project where I record every individual gammon an NFL season, edit it, and post it on the website. I have a bunch of images from the retro bowl source code that I want to edit for each player.
for this, I need to select each color and edit it to the team colors, Like this:
.
2
Answers
If I understood your question correctly, you want to change the color of the jersey and shorts of each player to be reflecting the colors of the selected team.
What you are trying to achieve is not possible.
You could use CSS properties like filter together with mix-blend-mode for example, but it would still be almost impossible to achieve the correct colours you want for different pixels of the same image.
My suggesion is, instead, to create several different images with the jerseys and shorts reflecting the different colours of the teams, and then load the right ones depending on the team you select.
You can draw an image on a canvas, get the image’s data and manipulate the pixels and save the canvas as an image. An example how you can manipulate an image’s pixels (here we change color (hue)). In your case find pixels with the needed color and change them.