我有一个黑心PNG图像我想用不同的颜色显示。如何使用 javascript/css/jquery 更改心形的颜色？
我正在努力成为一名衬衫设计师。所以背景是一件衬衫，心脏是印花设计（以及其他形状）。
附注 我知道这已经是重复的，但似乎没有任何解决方案有帮助。如果你们已经这样做了，希望你们能帮助我。非常感谢！
解决方案更新：
解决方案是使用画布。找到我的解决方案这里。 这是代码：
<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>
已经创建了多个图像（使用 Gimp 或 Photoshop 等照片编辑软件），然后使用 jQuery 简单地更改图像源。
另一种选择是使用带有透明心形孔的 PNG，并使用 jQuery 更改背景颜色。
我们可以使用 css 过滤器来改变 png 图像的颜色。
.test {
filter: invert(38%) sepia(87%) saturate(4677%) hue-rotate(310deg) brightness(100%) contrast(92%);
}<img src="image.png" class="test"/>你不能。
您可以做的是将其替换为心形的unicode文本字符并设置其颜色。
制作两个图像并使用CSS Sprites技术在用户单击/悬停/等时更改图像颜色。您可以根据需要进行自定义。有关创建 CSS Sprites 的简单教程，请参阅链接。
这是我找到的最佳解决方案，但不太适用于您的 T 恤项目，仅适用于想要使用形状图标的人。
您可以使用字体。剩下的就是历史了，我们都知道如何更改字体颜色。
您可以使用 Photoshop 更改图像的颜色，然后使用 onmouseover 更改要更改的图像。最后，您使用 onmouseout 返回原始图像（注意：您有两个图像：1 个更改后的图像和 1 个原始图像）。
如果你想通过考虑皱纹来改变 T 恤的颜色......你可以使用 Fabric js 库并将混合颜色滤镜应用到你的图像......它效果很好
有趣的是，这里没有 SVG 答案。通过编程，您可以动态调整 SVG，更改 SVG 中形状的颜色。
来自“sleske”的示例
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
<circle id="circle1" r="30" cx="34" cy="34"
style="fill: red; stroke: blue; stroke-width: 2"/>
</svg>
<button onclick="circle1.style.fill='yellow';">Click to change to yellow</button>创建您想要的任何形状，根据用户的要求调整颜色，甚至将选择映射到表单以提交到您自己的后端引擎以构建用于打印的图像。