删除图像中的颜色 - CSS、HTML、JS？答案

【问题标题】：Removing a color in image - CSS, HTML, JS?删除图像中的颜色 - CSS、HTML、JS？
【发布时间】：2015-04-25 20:53:01
【问题描述】：

我想知道如何去除网页上图像中的颜色。我想要某种结果，就像这里解释的那样......

包含三个部分的图像：蓝色、紫色和红色。我想过滤掉所有的蓝色，最后得到以下部分：黑色、红色和红色。

蓝紫红->黑红红

我知道这会以某种方式在 CSS 或 JavaScript 中完成，但我不知道该怎么做。我一直在搞乱 CSS filters，甚至在它上面放了一个 div，它是某种颜色，但没有什么能摆脱蓝色。

有人知道怎么做吗/有可能吗？

【问题讨论】：

我会使用 Photoshop，生成不同版本的图像，然后使用 JavaScript / CSS 更改显示的图像
您需要什么样的速度？图像是来自本地盒子还是从远程服务器中提取图像？您可以从着色器中获取实时数据，也可以使用画布获取慢速数据（请参阅 Rycochet 的回答），但在不符合服务器要求的情况下查看来自 Internet 的任意图像是一个安全例外。
速度在这里不是真正的问题。只要不花太多时间，一切都会好起来的。用户上传图像，然后颜色被过滤。请注意，我无法使用 PHP。使用外部程序也不是一种选择。

标签： javascript css

【解决方案1】：

您可以尝试使用 CSS 过滤器，但我认为没有针对特定颜色的过滤器，并且浏览器兼容性有限。 https://developer.mozilla.org/en/docs/Web/CSS/filter

或者，您可以使用 SVG 图像，它允许您使用 CSS 修改图像的某些部分，但是我认为 SVG 文件对于大图像可能会变得相当大... 我认为您可以使用 adobe illustrator 将文件保存为 SVG。 http://www.w3schools.com/svg/tryit.asp?filename=trysvg_myfirst

【讨论】：

【解决方案2】：

稍微复杂一些，但更兼容 - 将图像加载到画布中，然后在其中使用 getImageData，过滤掉您不想要的颜色，然后再次将其粘贴回来。

这不是一个快速（帧率）的过程 - getImageData 是一个非常慢的函数，因此除了最强大的机器之外，高清屏幕不会达到 60fps。话虽如此，如果您不尝试对其进行动画处理，那么它就是完美的 ;-)

【讨论】：

我要研究一下这个……可能就是这个。正如我在上面的评论中所说，速度在这里不是问题。
我使用了这种方法，但是我的控制台出现错误：Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
呃，跨域安全可能是一个完全的痛苦。如果所有浏览器都需要它，那么这是失败的，否则你可以让它在某些浏览器上工作，或者你必须确保图像在同一个源域上：-/
刚刚意识到 - 用户正在上传图像，您可以想象他们的源图像并在上传之前对其进行操作（并发送 2 个版本等） - 这应该绕过安全问题。
从技术上讲，用户并没有上传图片 - 他们在网络上提供了一个链接，然后将其用于结果。有没有办法在它的顶部放一点彩色<div>s 来尝试产生某种消色效果？它确实可以将青色放在图像上，或者至少看起来可以，但红色根本不起作用。