Question

我有一个black heart PNG image我希望以不同的颜色显示。如何使用javascript / css / jquery更改心脏的颜色？

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

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

解决方案更新：

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

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

Answer 1

技巧1

已经创建了多个图像（使用照片编辑软件，如Gimp或Photoshop），并使用jQuery简单地更改图像源。

Trick 2

另一个选择是让PNG中有一个透明的心形孔，并使用jQuery更改背景颜色。

Answer 2

你不能。

您可以做的是将其替换为unicode text character for a heart并设置其颜色。

Answer 3

制作两张图片并使用CSS Sprites技术在用户点击/悬停/等时更改图片颜色。您可以根据需要自定义。有关创建CSS Sprites的简单教程，请参阅链接。

Answer 4

这是我发现的最佳解决方案，但并不适用于您的T恤项目，仅适用于想要使用形状图标的人。

您可以使用FONTS。剩下的就是历史了，我们都知道如何改变字体颜色。

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

Answer 5

您可以使用 Photoshop 更改图像的颜色，然后使用 onmouseover 更改要更改的图像。最后，您使用 onmouseout 返回原始图像（注意：您有两个图像：1 个更改和 1 个原始图像）。

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

5 个答案:

技巧1

Trick 2