将图像分离成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）< / em> ，即白色。

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