[ACCEPTED]-How to change color of an image using jquery-jquery

Accepted answer
Score: 72

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

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

enter image description here

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

Here we will perform a 16 per-pixel color multiplication, since your 15 mug is in gray scale that will do it for 14 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 13 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 12 need the color from the color picker to 11 be in the RGB format, not hex, so use this 10 function in case your picker returns a hexadecimal 9 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 8 part, let's loop through the pixel data 7 and multiply it to the color from the color 6 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 5 working here: http://users7.jabry.com/overlord/mug.html

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

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

Score: 18

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

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

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

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

Score: 2

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

More Related questions