使用 Javascript/jQuery 和 CSS 更改 PNG 颜色

Question

新手上路，请多包涵

我有一个黑色的心形 PNG 图像，我想用不同的颜色显示。如何使用 javascript/css/jquery 更改心形的颜色？

我正在努力成为一名衬衫设计师。所以背景是一件衬衫，心是印花设计（以及其他形状）。

PS 我知道这已经是重复的，但似乎没有任何解决方案有帮助。如果你们已经这样做了，希望你们能帮助我。太感谢了！

解决方案更新：

解决方案是使用画布。在这里找到我的解决方案。这是代码：

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