替换png内的颜色答案

【问题标题】：Replace a color inside a png替换png内的颜色
【发布时间】：2023-03-18 00:48:01
【问题描述】：

我有一个想要更改图像颜色的网站。
我有一个像这样的简单 png：

<img src="arrow.png" alt="" id="arrow" />

如果我愿意，我想改变另一个内部的颜色，然后再改变另一个。

我尝试过这种模式，但不适用于 SVG，不会改变图像的颜色

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image style=fill:#000000"  xlink:href="arrow.png" />  
</svg>

我需要一个 PHP 或 javascript 或 jQuery 的解决方案，我在 PHP 中看到过 GD 库，但我想将颜色的更改应用到具有像我的图像一样的 id 的现有元素。

如何解决？

【问题讨论】：

这必须即时完成吗？你可以在 Photoshop/GIMP 中更改箭头的颜色，然后使用 javascript 和 jquery 交换照片吗？
为什么不使用简单的 SVG 图像？改变颜色很容易。
您是否真的需要更改箭头的颜色，或者您是否可以使用 alpha 透明箭头（在您的示例中为纯色前景——白色），它显示不同颜色的背景？
我可以拥有所有可能的颜色，并且我有大约 100 张可以编辑的图像.. 100*16.000.000。不可能@webdevsoup
不起作用，因为对所有图像应用了过滤器，我想在背景中应用颜色而不是@roasted

标签： php javascript jquery css svg

【解决方案1】：

我知道这个问题没有用 CSS3 标记，但对于那些认为它有帮助，或者根本不知道可以将 -mask-box-image 与 background 结合使用以用纯色“遮盖”图像的人，其他图像，甚至 [如本例所示] gradients。鉴于编程可访问性，如果需要，可以通过最少的脚本即时更改。

标记

<div class="arrow"></div>

CSS

.arrow {
     width: 250px;
     height: 250px;
     -webkit-mask-box-image: url('http://i.stack.imgur.com/1jkhG.png');
     background: -webkit-gradient(linear, 38% 0%, 60% 70%, from(#dde9f0), to(#3fc5f8), color-stop(.6,#79b2ec),color-stop(.7,#2e91e5));
}

结果

扑通

http://plnkr.co/edit/717iDTzblDQfFSkaT2N6?p=preview

显然，了解供应商前缀和支持的环境很重要。

【讨论】：

如果 webkit 不是唯一支持此功能的解决方案，那将是一个不错的解决方案……因此至少在接下来的 2 年内几乎无法使用。
在 Firefox 中不起作用，我认为在 IE 中不起作用......但在 Chrome 中工作正常......但我需要一个适用于所有浏览器的解决方案是可能的吗？
@Christoph，我不反对。虽然，“实际上无法使用”是主观的。 OP，这是关于使用上述方法和其他地方的 svg-fallback 的跨浏览器解决方案的好读物：http://thenittygritty.co/css-masking
如果您需要 50% 的浏览器的 svg 后备，只需首先使用 svg。
公平点，@Christoph。似乎您有足够的声誉来发布答案；为什么不试试这个？

【解决方案2】：

你不能在飞行中做到这一点。例如，您可以通过 PHP 脚本生成此图像并将其存储为每种颜色。您可以在本地计算机上制作并将 100 张图像上传到服务器。或者您可以在服务器上生成它并使用“永久”缓存。例如使用链接 arrow.php?color=000000

脚本将检入名称为 000000.png 的文件夹文件，如果文件存在，则将其传递给浏览器。否则脚本将生成具有此颜色的新图像，将其保存到文件 000000.png 并传递给浏览器。

【讨论】：

【解决方案3】：

您可以在 Photoshop 中将黑色部分剪切并使其透明，然后您可以像这样为图像应用背景：

<img style="background: red;" src="arrow.png">

它适用于所有浏览器。

【讨论】：

我不能，因为我下面还有一张图片，我需要背景透明
图片在另一张图片上，我不希望背景覆盖图片，我不想看到背景
@AlessandroMinoccheri 你能用 svg 代替 png 吗？
我可以，但是我如何才能改变颜色？我必须从源加载图像扩展并不重要，重要的是背景是透明的并且“内容”颜色可变
创建一个路径，并使用 css 用你想要的颜色填充它。然后您可以使用 php 或类似的东西动态更改 css 中的颜色。

【解决方案4】：

正如其他人建议的那样，您不妨只使用 SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="arrow" fill="#000000" d="m1,65 h172 l-64,-64 h50 l82,82 -82,82 h-50 l64,-64 h-172z"/>
</svg>

您可以选择具有 id 的元素并更改填充（或使用 style="fill:#000000"）。

【讨论】：