Javascript color/image help

ckb

Minion
Staff member
In my Invetory WTF script, I include some colored images for certain items to change them to colored versions (pixels, potions, wads, etc.). I do this for some items that are elemetal in nature, or colored in nature.
Currently, this is done by creating colored images of each item, then replacing the original black and white KoL image with the colored WTF version.

In TCRS, I see that some items and images are dynamically colored using Javascript. It would be great to use this method to avoid having to add a bunch of images to the distribution and avoid having to create new colored versions of images all the time.

tcrs.js includes a function: function colorImage(el,el2,hexaColor) that seems to do this somehow (using a canvas and doing something with that). I have spent a bit of time looking over this and realizing this is way beyond my skills. Is anyone here able to help crate a sample script that would color an inventory image, maybe given the item or image and a color #?

Thanks for any help.
 

ckb

Minion
Staff member
I might have some more time and thought to poke through this more, but I am out of TCRS now. Can someone post the html of their TCRS inventory here?
 

heeheehee

Developer
Staff member
It looks like it's basically just the same handling as in OCRS, except with a few extra colors. If you load tcrs.js, and specify the appropriate HTML element classes, then that should just automagically get applied.

e.g. to make an image red, just use <img class="red" src="...">

Class -> color mapping, for reference:
Code:
			red: '#ff0000',
			green: '#00ff00',
			cgreen: '#3C8D0D',
			purple: '#ff00ff',
			gray: '#333333',
			blue: '#0000ff',
			yellow: '#ffff00',
 

heeheehee

Developer
Staff member
Looks like the TCRS javascript uses the slightly more sophisticated approach where it picks elements with the data-tcrs attribute tag, then reads a comma-separated list of attributes. So... I think

<img data-tcrs="red" src="...">
 
Top