Разделение изображения на каналы RGB и восстановление оригинала с помощью стекирования?

Question

Можно ли разделить RGB-каналы фотографии таким образом, чтобы при размещении отдельных изображений друг над другом (скажем, на странице HTML, когда изображения представляют собой прозрачный "канал", уложенный друг на друга), можно увидеть оригинальное изображение, как это было?

Я пытался выделить выделение из каждого канала и сделать его отдельным слоем в цвете этого канала, но мне кажется, что я что-то упустил, или работа каналов сложнее, чем я думаю.

Причина, по которой я спрашиваю, заключается в том, что, если бы я мог заставить это работать, то я мог бы манипулировать непрозрачностью каждого цвета отдельно, используя CSS, и получить некоторые аккуратные эффекты (без использования canvas).

Answer 1

Согласно этой спецификации: http://dev.w3.org/fxtf/compositing-1/ CSS может поддерживать смешивание цветов, просто он не реализован в большинстве браузеров. Однако многие браузеры поддерживают использование смешения цветов в контексте "2d". Этот пост в блоге демонстрирует использование canvas для анимации смешения цветов и очень простое объяснение идеи. http://mackenziestarr.co.nf/blog/?p=7

Answer 2

Я ответил на мою собственную неопределенность по этому поводу:

Этот процесс не может воссоздать исходное изображение.

(Вот что кратко сказал JamWaffles в своем комментарии.) Вот объяснение, почему:

1. Вы можете сделать снимок и разделить каналы RGB с помощью программного обеспечения, такого как Photoshop.
2. Вы можете управлять этими каналами серой шкалы таким образом, чтобы добавить различные альфа-уровни красного, зеленого и синего и сохранить их в .png, Все идет нормально.
3. Вы не можете правильно их рекомбинировать, создавая слои в CSS. Предположим, у вас есть какая-то белая область фотографии. Обратите внимание на следующее:

Альфа-канал Объединение (является аддитивным)

Красный слой (255, 0, 0) + Зеленый слой (0, 255, 0) + Синий слой (0, 0, 255) = Вы видите RGB (255, 255, 255), т.е. белый.

CSS Layer Combining (не аддитивен, он покроет нижние слои)

Красный (верхний) слой (255, 0, 0) + Зеленый (средний) слой (0, 255, 0) + Синий (нижний) слой (0, 0, 255) = Вы видите RGB (255, 0, 0), т.е. только верхний слой, который красный, так как он покрывает зеленый и синий слои в точке, где он на 100% непрозрачен.

Таким образом, до тех пор, пока css не предложит вариант "добавлять" слои друг к другу, а не "перекрывать" друг друга, такая идея невозможна. Теперь нельзя сказать, что вы не смогли бы достичь некоторых довольно интересных эффектов с помощью слоистых .pngизображения с монохроматическими цветами, а затем манипулирование непрозрачностью слоев дальше через css, вы просто не сможете воссоздать изображение путем объединения каналов в css.