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

Question

是否可以通过以下方式分离照片的 RGB 通道：如果将单独的图像堆叠在一起（例如在 HTML 页面中，图像是彼此堆叠的透明“通道”），您可以看到原始图像的样子吗？

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

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

Answer 1

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

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

（JamWaffles 在他的评论中简短地说了这一点。）这是原因的解释：

1. 您可以拍摄照片并从 Photoshop 等软件中分离出 RGB 通道。
2. 您可以以这样的方式操纵这些灰度通道，以添加红色、绿色和蓝色的各种 alpha 级别，并将其保存到

   .png

   中。到目前为止，一切都很好。
3. 你不能通过在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 可以提供一种选项来让图层彼此“添加”而不是彼此“覆盖”时，这样的想法是不可能的。现在，这并不是说您无法使用具有单色颜色的分层

.png

图像实现一些相当有趣的效果，然后通过CSS进一步操纵图层的不透明度，您只是无法通过堆叠通道来重新创建图像在 CSS 中。

Answer 2

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

Answer 3

第一步：解构你的形象
这个网站做得很好：https://www.aatbio.com/tools/online-image-channel-splitter-rgb

第二步：堆叠图像
使用

position: absolute

、Flexbox、网格布局等等

第三步：创造魔法
在所有图像上设置 css 属性

mix-blend-mode: lighten;

就这样吧！

遵循一个基本示例，这里有一些关于您可以用它做什么的乐趣
适用于最新版本的 Safari、Chrome 和 Firefox。

.imgPart {
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: lighten;
}

<img id="red" class="imgPart" src="https://i.ibb.co/2ZmFLTM/red.png" />
<img id="green" class="imgPart" src="https://i.ibb.co/zR8LfgQ/green.png" />
<img id="blue" class="imgPart" src="https://i.ibb.co/LkPwM0k/blue.png" />