Forums » Help » Recolor images

Hi :)

I'm trying to make a plugin that will allow me to recolor fonts and images on the fly, so I can do cool stuff such as colored fonts and glowing NPCs.
Right now I'm just trying to see if I can apply a simple effect on the image, just like in this tutorial -
http://www.html5canvastutorials.com/advanced/html5-canvas-invert-image-colors-tutorial/

The problem is that I can't figure out how to properly clone the image to a new canvas. What I want is to basically make a copy of the original image, apply my effect, and draw the clone(so the original remains untouched).

Here is some modded font.js code:

_drawChar: function( c, targetX, targetY ) {
	if( !this.loaded || c < 0 || c >= this.indices.length ) { return 0; }
	
	var scale = ig.system.scale;
	
	
	var charX = this.indices[c] * scale;
	var charY = 0;
	var charWidth = this.widthMap[c] * scale;
	var charHeight = (this.height-2) * scale;		

	var colored = ig.$new('canvas');
	var coloredCtx = colored.getContext('2d');
	var coloredData = coloredCtx.getImageData( 0, 0, this.width, this.height );

	var thisData = ig.getImagePixels( this.data, 0, 0, this.width, this.height );
	coloredCtx.putImageData(thisData, 0, 0);
	
	ig.system.context.drawImage( 
		//this.data,
		colored,
		charX, charY,
		charWidth, charHeight,
		ig.system.getDrawPos(targetX), ig.system.getDrawPos(targetY),
		charWidth, charHeight
	);
	
	return this.widthMap[c] + this.letterSpacing;
}

As a result, instead of characters I get weird symbols that resemble the original characters a little bit. Please help me solve this.

Thanks in advance :D

Your thread title is "recolor images", but it seems you mostly just mean fonts.
https://github.com/Joncom/impact-font-sugar

Thanks, I'll have a look at your link!
And the reason I started with fonts is that in my game I only need to recolor images in 1 occasion(glowing NPCs), but there are many occasions in which I need colored text.

EDIT:
Also that guy's code doesn't work.

uncaught exception: Failed to load resource: media/font.png?color=#FF0000

Line 0

Firstly, "that guy" is me :)
Let's see the code of your attempt...

I figured it out, and even made a little plugin in the process.

To use it, save the included code as "lib/plugins/silent/image.js" and in your class file require "plugins.silent.image".
Please note that even though it says image, it will work for both images and fonts!

Basically you either pass the color as a parameter when you're creating the font, like so:

font: new ig.Font('media/04b03.font.png', {imgColor: "#ff0000"}),

Or you can call .colorize() to change it later:

this.font.colorize("#abc");
this.font.colorize("#aabbcc");
this.font.colorize("#aabbccff");

All three calls will produce the same result.
The first one is a short way of specifying a color and the second one is the standard.
The third one also include alpha - if you specify an alpha value(in this case ff, which has no effect) instead of just coloring every pixel in the image with the given color, the function will work by basically putting a semi-transparent layer of your color over the image.

ig.module(
    "plugins.silent.image"
)
.requires(
    "impact.image"
)
.defines( function () {

    "use strict";

    ig.Image.inject({

        imgColor: null,

        init: function (path, settings) {
            this.parent(path, settings);

            if(typeof(settings) === "object" && typeof(settings.imgColor) === "string") {
                this.imgColor = settings.imgColor;
            }
        },

        onload: function ( event ) {
            if(this.imgColor !== null) {
                this.colorize(this.imgColor);
            }

            this.parent(event);
        },

        // Color needs to be a string, being either "#rgba" or "#rrggbbaa" (a for alpha)
        colorize: function (imgColor) {

            var error = function () {
                throw("Invalid color specified: " + imgColor + ". Color must be in one of the following forms: #rgb, #rrggbb or #rrggbbaa (a for alpha).");
            }

            var c = imgColor.slice(1);
            var r = 0;
            var g = 0;
            var b = 0;
            var a = 255;

            if(c.length === 3) {
                r = c.slice(0, 1);
                g = c.slice(1, 2);
                b = c.slice(2, 3);

                r = r + r;
                g = g + g;
                b = b + b;

                r = parseInt(r, 16);
                g = parseInt(g, 16);
                b = parseInt(b, 16);
            } else if(c.length === 6) {
                r = parseInt(c.slice(0, 2), 16);
                g = parseInt(c.slice(2, 4), 16);
                b = parseInt(c.slice(4, 6), 16);
            } else if(c.length === 8) {
                r = parseInt(c.slice(0, 2), 16);
                g = parseInt(c.slice(2, 4), 16);
                b = parseInt(c.slice(4, 6), 16);
                a = parseInt(c.slice(6, 8), 16);
            } else {
                error();
            }


            var canvas = ig.$new("canvas");
            canvas.width = this.data.width;
            canvas.height = this.data.height;

            var context = canvas.getContext('2d');
            
            var imageData = ig.getImagePixels( this.data, 0, 0, this.data.width, this.data.height );

            for(var i = 0; i < imageData.data.length; i += 4) {
                if(imageData[i + 3] !== 255) {
                    imageData.data[i] = (imageData.data[i] * (255 - a) / 255) + (r * a / 255);
                    imageData.data[i + 1] = (imageData.data[i + 1] * (255 - a) / 255) + (g * a / 255);
                    imageData.data[i + 2] = (imageData.data[i + 2] * (255 - a) / 255) + (b * a / 255);
                }
            }

            context.putImageData(imageData, 0, 0);
            this.data = canvas;
        }
    });
});

Joncom, I'm sorry I already deleted the code :(
I've decided it would be best if I made a plugin of my own that will work on images as well, and so I did. Thanks for your help though :)

No worries. Glad you're all sorted out now. :)