Php和Canvas像素颜色替换[关闭]

Question

Hello dear people of internet,

I have an idea for interesting script, but I'm trying to find the best way to accomplish what I want.

Idea is simple. Have pixels colors replaced, to achieve custom color for character every time. I have this guy, I will be using php canvas and maybe svg to generate these images: source image

And what I basically need is via script turn it into this: final result

I considered few ways to do it:

1) Have alpha only pixels and color it from behind and place alpha image on top to achieve shading and depth

2) Draw each pixel individually (but this option isn't what I really want to do)

3) Use some thing like hue/saturation, but that is beyond my knowledge.

maybe there is something I can do to achieve it.

Thank you.

Answer 1

It's past 2am so here's a brief answer.

Best option: Create a spritesheet with all your character variations and cut out desired sprites from your spritesheet like this: drawImage(spritesheet, spriteX, spriteY, spriteWidth, spriteHeight, canvasX, canvasY, spriteWidth, spriteHeight)

Next best option: Create a spritesheet with your full character and then have multiple sets of replacement pants (just pants--not the full character), replacement shirts, replacement weapons, etc. First draw the full character and then draw the desired pants on top of the character -- overwriting the original pants with desired pants. This way you're effectively "dressing" the character in replaceable pants, shirts, weapons, etc.

If you need runtime recoloring, use compositing to dynamically recolor a cutout of just the pants:

• Create a full character on the main canvas
• On a second canvas, create just the pants.
• Set `secondContext.globalCompositeOperation='source-in'
• Set a desired fillStyle.
• Fill a rectangle on the entire second canvas: secondContext.fillRect(0,0,secondCanvas.width,secondCanvas.height)

About your #2: Expensive to manipulate pixels -- avoid if possible.

About your #3: If you're just replacing a single RGB color, you don't need to mess with saturation & lightness.