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

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

35 голосов
/ 25 ноября 2010

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

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

Это возможно с любым трюком HTML5 / CSS3 / canvas / SVG?

Ответы [ 10 ]

27 голосов
/ 04 декабря 2010

Я создал отдельную облегченную библиотеку с открытым исходным кодом для выполнения режимов наложения в стиле Photoshop из одного контекста HTML-холста в другой: 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 для получения дополнительной информации, включая поддерживаемые в настоящее время режимы наложения.

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

12 голосов
/ 16 апреля 2012

Нет (не изначально), но это скоро: http://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/

7 голосов
/ 16 сентября 2011

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

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

2 голосов
/ 28 апреля 2011

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

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

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

Я бы хотел что-то вроде Предлагаемые EffectGames : 

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.

2 голосов
/ 25 ноября 2010

Это не HTML5, но это настолько близко, насколько я могу найти, о чем вы просите.

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

Iне думайте, что «режимы смешивания», такие как Photoshop, можно было бы эмулировать только с чистым HTML, если только язык не сделал крутой поворот в другом направлении.Но было бы здорово увидеть более простой способ сделать это.

1 голос
/ 04 августа 2015

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

mix-blend-mode: 'multiply'

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

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

1 голос
/ 05 июня 2013

Он приземлился в Chrome Canary, поэтому скоро должен появиться.http://blogs.adobe.com/webplatform/2013/04/23/all-blend-modes-for-css-fragment-shaders-have-landed/

1 голос
/ 20 января 2011

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

0 голосов
/ 27 января 2013

Я реализовал самые популярные режимы наложения, известные из gimp / photoshop, используя canvas в http://canvasquery.com/, однако он не подходит для релейного времени.

Это изменится с введением собственных режимов наложения в канве

https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingseparable

0 голосов
/ 24 апреля 2012

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

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

...