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

【问题标题】：Change PNG Color using Javascript/jQuery and CSS使用 Javascript/jQuery 和 CSS 更改 PNG 颜色
【发布时间】：2012-02-28 02:45:51
【问题描述】：

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

我正在尝试做一名衬衫设计师。所以背景是衬衫，心是印花设计（以及其他形状）。

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

解决方案更新：

解决方案是使用画布。找到我的解决方案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>

【问题讨论】：

你想要一个像悬停黑色图像这样的效果，它应该变成红色。类似的东西？
为什么不只制作 2 张不同的图像并使用 css 来完成其余的工作？
@Dave：类似的东西，但不是悬停。我试图将 png 图像放在衬衫上（衬衫颜色可能不同）并让用户选择设计的颜色（在本例中为心形）。
@skyrel：我认为这样做效率低下。我希望能够将其更改为 20 多种颜色。 :)
由于您没有提及您可能看过哪些，请参阅：stackoverflow.com/questions/4298323/…

标签： javascript jquery css image png

【解决方案1】：

如果您想通过考虑皱纹来改变 T 恤的颜色...您可以使用织物 js 库并将混合颜色过滤器应用于您的图像..效果很好

fabric js blend color

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。

【解决方案2】：

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

【讨论】：

【解决方案3】：

技巧 1

已经创建了多张图像（使用 Gimp 或 Photoshop 等照片编辑软件），只需使用 jQuery 更改图像源。

技巧 2

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

【讨论】：

+1 表示第二个技巧，只有在页面背景允许简单背景（如白色）时才能使用。
@RobertKoritnik 谢谢。我是在我的website 上设计“100% 原创”标志时学到的。
@adarshr。感谢您的回答。我希望能够将其更改为 20 多种颜色，并且我认为创建多个图像会很重（我也在为其他形状做同样的事情）。至于技巧 2，我将 png 图像放在衬衫图像的前面（颜色不同）。 :)
@BlackBook 我认为如果您将衬衫作为底层，您仍然可以这样做，您将在其上放置彩色背景，然后在顶部放置心形孔。可以使用z-index来实现。试一试。
如果使用技巧 1，ImageMagick (imagemagick.org) 可以节省大量时间。基本上，这允许您编写简单的脚本，将一个图像（黑心）更改为任意数量的不同颜色的图像（并且远不止这些）。对于自动化制作大量不同颜色图像的繁琐过程非常有用。尤其是当您想要更改基础映像时。

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

你不能。

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

【讨论】：

<canvas> 怎么样？