How to change color of an image using jquery

Question

First of all I am sorry for the stupid question I am going to ask. I have an image of a mug. When any user picks a color code from color picker I want to turn the color of the mug to that color.

Would you please kindly give me a hint on how to do this using jquery? I am planning to achieve this using PHP and Jquery.

Thanks in Advance :)

P.S It just occurred to me that its not possible to change the color of an object using a color picker if it is in an image format but still there got to be a way to achieve this. Would you please kindly suggest me something?

Answer 1

Ok, first step, instead of using jpeg format, you're going to use the PNG so you can have transparent areas on the image.

Open it on an image editor and cut out all the blank areas on the image, leaving the mug with a transparent contour. Like this:

We are not going to use jQuery here because honestly I know nothing about it so I can't help you with that, instead we're going to use directly the canvas API from HTML 5 (this means your app will not work on older browsers)

Here we will perform a per-pixel color multiplication, since your mug is in gray scale that will do it for us.

Let's pick an array containing all of the pixels color information.

1. Add the image to the DOM
2. Create an offscreen canvas element
3. Wait for the image to load
4. Draw the image on the canvas

5. Get the pixels data using the getImagedata method, inside the onload event of the image

   <*img src="mug.png" id="mug" width="25%" height="25%" onload="getPixels(this)" />

   var mug = document.getElementById("mug");
   var canvas = document.createElement("canvas");
   var ctx = canvas.getContext("2d");
   var originalPixels = null;
   var currentPixels = null;
   
   function getPixels(img)
   {
       canvas.width = img.width;
       canvas.height = img.height;
   
       ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
       originalPixels = ctx.getImageData(0, 0, img.width, img.height);
       currentPixels = ctx.getImageData(0, 0, img.width, img.height);
   
       img.onload = null;
   }
   

We need the color from the color picker to be in the RGB format, not hex, so use this function in case your picker returns a hexadecimal value to convert it:

function hexToRGB(hex)
{
    var long = parseInt(hex.replace(/^#/, ""), 16);
    return {
        R: (long >>> 16) & 0xff,
        G: (long >>> 8) & 0xff,
        B: long & 0xff
    };
}

Now here is the magic part, let's loop through the pixel data and multiply it to the color from the color picker.

on my script there is no color picker, I have just created a simple text input to type in the hexadecimal color, this function below is the onclick event of an input button

    function changeColor()
    {
        if(!originalPixels) return; // Check if image has loaded
        var newColor = hexToRGB(document.getElementById("color").value);

        for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
        {
            if(currentPixels.data[I + 3] > 0) // If it's not a transparent pixel
            {
                currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R;
                currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
                currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
            }
        }

        ctx.putImageData(currentPixels, 0, 0);
        mug.src = canvas.toDataURL("image/png");
    }

See, the trick is:

• Get the original pixel color
• Convert it from range 0-255 to 0-1
• Multiply it to the new color you want it to be.

You can see it working here: http://users7.jabry.com/overlord/mug.html

• I am sure it works at least on firefox and chrome.

• The mug contour doesn't look good, that's because I just did a quick "magic wand" on photoshop, you can do something better later.

Answer 2

You could use a knock-out picture of a mug with transparent areas, give it a background and change the color of the background as required. cssTricks

Here's a basic example, jsFiddle, using Farbtastic Color Picker.

$('#colorpicker').farbtastic(function(color){
    $('img').css("background-color",color);
});​

Answer 3

You should use "Product Colorizer" by Nik Korablin. It supports one or two colors, and is simple to set up.

Answer 4

You could overlay an absolutely positioned .png with a z-index greater than the base image of the mug. The overlay would be the colored mug and could have the background knoced out if needed. Swap the overlay as needed via an event handler- maybe add/remove a class?