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

Question

感谢您的时间。我们以多种颜色销售许多3D打印产品，因此我们必须为我们提供的每种毛毡颜色创建PNG（或JPG）图像文件，因此如果我们在10种颜色上有10个产品，则意味着我们需要100个PNG图像文件出口。

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

是为此目的创建的SVG文件？ （我说的是愚蠢的事吗？：P）

通常每个图像只是一种带有灰色阴影的颜色，例如：

Answer 1

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

Answer 2

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

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

你确实需要html5 / canvas支持，但这取决于用例。

Answer 3

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

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

Answer 4

我找到了答案，然后我做了一个jsfiddle演示：

http://jsfiddle.net/pys565at/

我使用库http://filtrr.me/中的图层选项，它使用画布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();
});