21

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>
8
  • do you want to an effect like on hovering the black image it should turn red. something like that?
    – uday
    Feb 6, 2012 at 16:18
  • why dont just make 2 distinct images and use css to do the rest?
    – Skyrel
    Feb 6, 2012 at 16:18
  • @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. Feb 6, 2012 at 16:33
  • @skyrel: i think it would be inefficient to do that. i want to be able to change it to more than 20 colors. :) Feb 6, 2012 at 16:33
  • As you did not mention which ones you may have looked at see: stackoverflow.com/questions/4298323/…
    – John
    Feb 6, 2012 at 16:42

7 Answers 7

10

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.

5
  • 2
    +1 for the second trick which can only work if their page background allows for simple backgrounds (like white). Feb 6, 2012 at 16:22
  • @RobertKoritnik Thanks. I learnt it while designing the "100% Original" logo on my website.
    – adarshr
    Feb 6, 2012 at 16:24
  • @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). :) Feb 6, 2012 at 16:39
  • @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.
    – adarshr
    Feb 6, 2012 at 16:57
  • 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.
    – Sean
    Aug 26, 2013 at 18:59
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"/>

1

You can't.

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

1
  • 2
    What about with a <canvas>?
    – Pointy
    Feb 6, 2012 at 16:27
1

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.

1

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/

0

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).

0

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

1
  • 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.
    – taras
    Sep 5, 2021 at 10:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.