如何直接在浏览器中更改图像的颜色？答案

【问题标题】：how to change the color of an image directly in the browser?如何直接在浏览器中更改图像的颜色？
【发布时间】：2014-10-09 00:39:05
【问题描述】：

感谢您的宝贵时间。我们销售多种颜色的许多 3D 打印产品，因此我们必须为我们提供的每种颜色创建一个 PNG（或 JPG）图像文件，因此如果我们有 10 种颜色的 10 种产品，这意味着我们必须有 100 个 PNG 图像文件导出。

我的问题是：有什么方法可以在客户端动态更改图像的颜色？例如，如果用户选择一种颜色，则对象会更改其颜色而不加载新的 img 文件

是否为此目的创建了 SVG 文件？（我是在说一些愚蠢的事情吗？：P）

通常每张图片都是一种带有灰色阴影的颜色，例如：

【问题讨论】：

如果它们是作为 SVG 创建的，我相信如果你这样加载它们，你可以选择更改颜色。作为图像，您非常有限。最适合的是新的 css3 过滤器属性，但支持是有限的，它不是您正在寻找的。 css-tricks.com/almanac/properties/f/filter
谢谢@ChristopherMarshall，你知道你在说什么SVG选项吗？或者做一个例子？谢谢！
这样的？ algosome.com/articles/drawing-javascript-graphics-svg.html

标签： javascript css browser svg

【解决方案1】：

从图像中移除颜色，留下透明度。当在图像包装器的 HTML 元素上使用背景颜色时，它可以与图像融为一体。

【讨论】：

这是一个超级有趣的想法。但是背景包装不需要适合图像边缘吗？例如是图像/产品的形状。
如果您的产品在实际图像背景上有白色（或任何其他颜色），则否
哦！所以只是产品本身是透明的，有白边！好主意！
css3 过滤器应该可以做到这一点！灰度/不透明度组合。不会是完美的，但可能比创建所有这些图像更好。但最终结果应该仍然非常接近实际产品，所以我想知道。
Photoshop 中还有一个快捷方式可以轻松地对图像进行灰度化，因为无论如何他们至少需要一个参考。

【解决方案2】：

如果所有图像都是单色的，您可以在画布上绘制图像的白色版本，并通过乘以所需颜色来更改像素颜色（例如，红色为 (1.0, 0.0, 0.0)）。

一些示例过滤器： http://www.html5rocks.com/en/tutorials/canvas/imagefilters/

您确实需要 html5 / canvas 支持才能使其正常工作，因此这取决于用例。

【讨论】：

谢谢@Turiphro，我想这就是我要走的路。这正是我需要的：w3schools.com/tags/…

【解决方案3】：

考虑使用一些服务器端代码。我会使用 asp.net/c#（php 或您选择的语言）操作图像，然后使用 jquery ajax 调用在客户端上调用它。

服务器端语言可以轻松处理图像。或许这篇文章可以帮到你：How to manipulate images at the pixel level in C#

【讨论】：

试图说服 OP 使用不同于他明确表示他希望使用的方法可能更适合作为对该问题的评论，将其视为“使用服务器端代码”不是“如何使用客户端代码做到这一点？”的答案
这确实是他们防守中最一致的方法之一。基于浏览器的颜色变化是超级善变的。
我尊重你的想法，但我的回答是基于大型网站和电子商务在互联网上所做的事情。在客户端更改颜色可能会给他带来跨浏览器问题。此外，您实际上不能在客户端“更改颜色”。因为你需要操纵这些位来做到这一点
尽管如此，这并不能使它成为问题的有效答案。此外，关于跨浏览器问题，这正是开发人员优雅地降级或逐步增强内容的原因。 OP 很可能已经弄清楚了服务器端的实现，并且可能正在为浏览器足够强大的访问者寻找一种增强的方法。
没问题。我很高兴他找到了解决办法。希望我的回答（即使它是错误的）可以帮助互联网上的其他人。最好的问候

【解决方案4】：

我找到了答案，我做了一个 jsfiddle Demo：

http://jsfiddle.net/pys565at/

我使用了库 http://filtrr.me/ 中的图层选项，它使用 canvas HTML5 更改单色图像（它没有！使用 WebGl，这很好）。

Filtrr2("#myImageID", function () {
    // Create a duplicate of the image
    var dup = this.dup();
    dup.fill(0, 128, 55); // change image to green
    this.contrast(100)
    .saturate(-100) // bw
    .layer("overlay", dup) // use this layer
    .render();
});

【讨论】：