将图像分离为 RGB 通道并通过堆叠重建原始图像？答案

【问题标题】：Separating image into RGB channels and reconstructing original by stacking?将图像分离为 RGB 通道并通过堆叠重建原始图像？
【发布时间】：2012-01-11 22:04:11
【问题描述】：

如果您将单独的图像堆叠在一起（例如在 HTML 页面中，图像是堆叠在一起的透明“通道”），是否可以分离照片的 RGB 通道，你能看到原来的图像吗？

我尝试从每个通道中获取一个选择，并使其成为该通道颜色的单独图层，但似乎我遗漏了一些东西，或者通道的工作方式比我想象的要复杂。

我问的原因是因为如果我可以让它工作，那么我可以使用 CSS 分别操纵每种颜色的不透明度并获得一些简洁的效果（不使用画布）。

【问题讨论】：

我知道 Paint Shop Pro 中有一个脚本可以执行此操作，但我不记得在哪里可以找到它。它可能依赖于浏览器中不可用的混合模式。
我曾考虑自己尝试做类似的事情，但还没有真正尝试过。它理论上可以工作。
@JamWaffles--我不认为这是他试图在 CSS 中“做”的通道，只是在堆叠层上操纵不透明度（比如带有 .png 背景图像的 3 个 div包含保存在照片软件之外的红色、绿色和蓝色通道）。这在 CSS 中肯定是“可能的”，尽管我不确定它是否真的可以重新创建图像。

标签： css image-processing photoshop

【解决方案1】：

我已经回答了我自己对此的不确定性：

此过程无法重新创建原始图像。

（JamWaffles 在他的评论中简短地说。）以下是原因的解释：

您可以拍照并从 Photoshop 等软件中分离出 RGB 通道。
您可以操作这些灰度通道，以添加具有红色、绿色和蓝色的各种 Alpha 级别并将其保存到 .png。到目前为止，一切顺利。
您无法通过在 css 中分层正确地重新组合它们。假设您有一些照片区域是白色的。请注意以下几点：

Alpha 通道组合（相加）

红色层 (255, 0, 0) + 绿色层 (0, 255, 0) + 蓝色层 (0, 0, 255) = 你看到 RGB(255, 255, 255)，即白色。

CSS 图层组合（不是附加的；它会覆盖较低的图层）

红色（顶部）图层 (255, 0, 0) + 绿色（中间）图层 (0, 255, 0) + 蓝色（底部）图层 (0, 0, 255) = 你看RGB(255, 0, 0)，即只有顶层，是红色的，因为它在100%不透明的地方覆盖了绿色和蓝色层。

因此，直到 css 可能提供一种选项让层“添加”到彼此而不是“覆盖”彼此之前，这样的想法是不可能的。现在这并不是说您无法使用具有单色颜色的分层.pngimages 实现一些相当有趣的效果，然后通过 css 进一步操纵图层的不透明度，您永远无法重新创建图像css中通道的堆叠。

【讨论】：

您可以通过使用应用于 html 元素 developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content 的 svg 过滤器（特别是 feBlend=additive）来实现它。但是，它只适用于 Firefox。
有趣的想法。因为他想避免canvas，所以我不知道 svg 是否会成为 Bart 想要融入其中的东西。但它确实可能创造出让它发挥作用的可能性。

【解决方案2】：

根据本规范：http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode CSS 可以支持颜色混合，只是大多数浏览器都没有实现。然而许多浏览器支持在“2d”画布上下文中使用颜色混合。这篇博文演示了使用画布进行颜色混合动画以及对该想法的非常基本的解释。 http://mackenziestarr.co.nf/blog/?p=7

【讨论】：