Возможны ли в HTML5 режимы смешивания фотошопов?

Я хочу поместить красный прямоугольный элемент <div> поверх моей веб-страницы, чтобы он выглядел не только прозрачным, но и как смешанным в режиме Photoshops Multiply.

<div> будет иметь position: fixed, поэтому содержимое ниже этого будет быстро изменено.

Возможно ли это с любым трюком HTML5/CSS3/canvas/SVG?

Ответы

Ответ 1

Я создал отдельную, легкую библиотеку с открытым исходным кодом для выполнения режимов наложения в стиле Photoshop из одного контекста HTML Canvas в другой: context-blender. Здесь используется выборка:

// Might be an 'offscreen' canvas
var over  = someCanvas.getContext('2d');
var under = anotherCanvas.getContext('2d');

over.blendOnto( under, 'screen', {destX:30,destY:15} );

Подробнее см. README, включая поддерживаемые в данный момент режимы наложения.

Вы можете использовать это, чтобы выполнять умножение с одного холста на другой, но не на стандартные HTML-элементы.

Ответ 3

Вы также можете посмотреть эту демонстрацию: http://media.chikuyonok.ru/canvas-blending/, чтобы увидеть, как это сделать с холстом.

Проверьте исходные формулы для режимов смешивания и способы их применения (формулы более читабельны, чем в пиксельном или контекстном blender).

Ответ 4

Это не HTML5, но он как можно ближе к тому, что вы просите.

режимы смешивания Javascript (OpenGL).

Я не думаю, что "режимы смешивания", такие как Photoshop, можно эмулировать только с помощью чистого HTML-кода, если только язык не совершил резкий поворот в другом направлении. Но было бы здорово увидеть более простой способ сделать это.

Ответ 5

Я также очень заинтересован в этом. Многие макеты, которые я кодировал для визуальных дизайнеров, могли бы использовать это. Помимо других сообщений в этом потоке, есть способ сделать это, в настоящее время только в Firefox 4, без использования OpenGl или Canvas. Это позволяет использовать фильтры SVG. По-видимому, это тоже на ночках из Webkit и Chrome, но пока я ничего не видел.

Вот несколько демонстраций и объяснений:

ИМХО, что-то вроде близких к режимам смешивания слишком сложно достичь прямо сейчас. Очень сложно найти ссылки на feConvolveMatrix, feSpecularLighting или feColorMatrix, и примеры просто невозможно понять для меня. Они могут работать, но я не знаю, как.

Мне хотелось бы что-то вроде Рекомендуемые Эффективные игры:

div.sprite {
   position: absolute;
   z-index: 2;
   composite: add;
}

Это был бы лучший подход. Может быть, какой-нибудь ниндзя, лежащий в математике, может заставить нас сделать это.

РЕДАКТИРОВАТЬ: Существует более простая спецификация SVG, предназначенная для того, чтобы делать точно смешанные режимы. Но ни один браузер, который я тестировал, не работает (FF4, IE9, Opera11, Webkit Nightly): http://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html - Но я также не знаю если это можно будет использовать в элементах HTML-DOM.

Ответ 6

Это самое близкое, что я видел, и да, все активы должны быть на холсте. Обратите внимание, что Internet Explorer начинает поддерживать холст в версии 9, который еще не вышел, поэтому, если вам нужно поддерживать IE и 9, вам придется использовать обходной путь.

Ответ 8

В зависимости от задействованных изображений и точного эффекта, которые вы после этого, вы можете сделать некоторое творческое разбиение изображений и градиентов CSS для достижения желаемого эффекта:

http://jonathonhill.net/2012-04-23/blending-css-gradients-like-photoshop/

Ответ 10

Вы уже можете использовать его только с простым CSS (без холста). Пример:

mix-blend-mode: 'multiply'

Internet Explorer может не поддерживать его, но другие браузеры делают.

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode