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>
haifacarina
  • 1,212
  • 1
  • 12
  • 18
  • do you want to an effect like on hovering the black image it should turn red. something like that? – uday Feb 06 '12 at 16:18
  • why dont just make 2 distinct images and use css to do the rest? – Skyrel Feb 06 '12 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. – haifacarina Feb 06 '12 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. :) – haifacarina Feb 06 '12 at 16:33
  • As you did not mention which ones you may have looked at see: http://stackoverflow.com/questions/4298323/replaceing-color-on-a-image-realtime – John Feb 06 '12 at 16:42
  • @BlackBook - It's OK to answer your own question. Just take the "answer" part and add an answer. – KatieK Feb 06 '12 at 18:50
  • 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! – Liam Shalon Apr 24 '14 at 03:51
  • You can change the colour of any image with CSS: https://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css – dwjohnston Nov 05 '18 at 05:24

7 Answers7

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.

adarshr
  • 61,315
  • 23
  • 138
  • 167
  • 2
    +1 for the second trick which can only work if their page background allows for simple backgrounds (like white). – Robert Koritnik Feb 06 '12 at 16:22
  • @RobertKoritnik Thanks. I learnt it while designing the "100% Original" logo on my [website](http://www.adarshr.com/). – adarshr Feb 06 '12 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). :) – haifacarina Feb 06 '12 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 06 '12 at 16:57
  • If using Trick 1, ImageMagick (http://www.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 '13 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"/>
kesh
  • 145
  • 1
  • 2
  • 7
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/

Nicola Mihaita
  • 71
  • 1
  • 2
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.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
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.

uday
  • 8,544
  • 4
  • 30
  • 54
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).

Tuấn Vĩ
  • 1
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

Fateme Amere
  • 11
  • 2
  • 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 05 '21 at 10:30