Change PNG Color using Javascript/jQuery and CSS

问题

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>

回答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.

回答2:

You can't.

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

回答3:

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.