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

Question

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

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

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

Answer 1

Согласно этой спецификации: http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode 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(не аддитивен; он покроет нижние слои)

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

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