Change PNG Color using Javascript/jQuery and CSS

Question

I have a black heart PNG image I want to display with different color. How can I change the color of the heart using javascript/css/jquery?

I'm trying to make a shirt designer. So the background is a shirt, and the heart is the print design (among other shapes).

P.S. I know this is already a duplicate but there seem to have no solution that was of help. Hope you guys could help me if ever you have done this already. Thank you so much!

SOLUTION UPDATE:

The solution was to use canvas. Found my solution here. Here's the code:

<h4>Original Image</h4>
<img id="testImage" src='black-heart.png'/>

<h4>Image copied to canvas</h4>
<canvas id="canvas" width="128" height="128"></canvas>

<h4>Modified Image copied to an image tag</h4>
<img id="imageData"/>



<script>
var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");

ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 128, 128),
    pix = imgd.data,
    uniqueColor = [0,0,255]; // Blue for an example, can change this value to be anything.

// Loops through all of the pixels and modifies the components.
for (var i = 0, n = pix.length; i <n; i += 4) {
      pix[i] = uniqueColor[0];   // Red component
      pix[i+1] = uniqueColor[1]; // Blue component
      pix[i+2] = uniqueColor[2]; // Green component
      //pix[i+3] is the transparency.
}

ctx.putImageData(imgd, 0, 0);


var savedImageData = document.getElementById("imageData");
savedImageData.src = canvas.toDataURL("image/png"); 
</script>

Premonitory

do you want to an effect like on hovering the black image it should turn red. something like that? – Phantasy

why dont just make 2 distinct images and use css to do the rest? – Tantra

@Dave: something like that but not on hover. im trying to put the png image on a shirt (shirt colors may differ) and have the user choose what color the design (in this case, heart) would be. – Premonitory

@skyrel: i think it would be inefficient to do that. i want to be able to change it to more than 20 colors. :) – Premonitory

As you did not mention which ones you may have looked at see: #4298823 – Washday

@BlackBook - It's OK to answer your own question. Just take the "answer" part and add an answer. – Enuresis

Hi, I'm wondering if you could explain how I could just manipulate an image's color overlay like you did it but only to the original image... Please let me know! – Isoline

You can change the colour of any image with CSS: #7416372 – Buckman

Answer 1

Trick 1

Have multiple images already created (using photo editing software such as Gimp or Photoshop) and simplly change the image source using jQuery.

Trick 2

Another option is to have a PNG with transparent heart-shapped hole in it and change the background colour using jQuery.

Vyatka

+1 for the second trick which can only work if their page background allows for simple backgrounds (like white). – Footpoundsecond

@RobertKoritnik Thanks. I learnt it while designing the "100% Original" logo on my website. – Vyatka

@adarshr. thanks for the answer. i want to be able to change it to more than 20 colors and i think it would be heavy to create multiple images (i'm also doing the same thing for other shapes). As for trick 2, im placing the png image in front of a shirt image (colors vary). :) – Premonitory

@BlackBook I think you can still do it if you have the shirt as the bottom layer on top of which you will place a coloured background followed by the heart-shaped-hole at the top. Can be achieved using z-index. Give it a try. – Vyatka

If using Trick 1, ImageMagick (imagemagick.org) can be a huge time saver. Basically this allows you to write simple scripts that will change one image (the black heart) into as many different colored images as you like (and much more than this). Really useful to automate the tedious process of making lots of different colored images. Especially when you then want to change the base image. – Eisegesis

Answer 2

We can Use css Filters which will change the png image color.

.test {
filter: invert(38%) sepia(87%) saturate(4677%) hue-rotate(310deg) brightness(100%) contrast(92%);
}

<img src="image.png" class="test"/>

Ripleigh

Answer 3

You can't.

What you can do is replace it with the unicode text character for a heart and set the colour of that.

Mylor

What about with a <canvas>? – Folkway

Answer 4

Make two images and use the CSS Sprites technique to change the image color when user clicks/hovers/ etc.. you can customize as you want. See the link for simple tutorial on creating the CSS Sprites.

Phantasy

Answer 5

This is the best solution i found but doesn't quite apply to your t-shirt project, just for people who want to use shape icons.

You can use FONTS. And the rest is history, we all know how to change a font color.

http://fortawesome.github.com/Font-Awesome/

Ally

Answer 6

You can use Photoshop to change the color of your image, then you use onmouseover to change your image to be changed. finally, you use onmouseout to return the original image(note: you have two images: 1 changed and 1 the original).

Kidwell

Answer 7

if you want to change color of t-shirt by considering wrinkles ... you can use a fabric js library and apply blend color filter to your image ..it works very well

fabric js blend color

Hengel

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Chemnitz

Answer 8

Interesting, no SVG answers in here. Programmatically you can adjust an SVG dynamically, changing the colour of a shape within the SVG.

Example from 'sleske'

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
  <circle id="circle1" r="30" cx="34" cy="34" 
            style="fill: red; stroke: blue; stroke-width: 2"/>
  </svg>
<button onclick="circle1.style.fill='yellow';">Click to change to yellow</button>

Create any shape you want, adjust the colours as the user requests them, even map the choices to a form to submit to your own backend engine to build the image for printing.

Pairs