web-dev-qa-db-fra.com

Les modes de fusion de type Photoshop sont-ils possibles en HTML5?

Je veux mettre un rectangulaire rouge <div> élément sur ma page Web afin qu'elle soit non seulement transparente, mais également comme mélangée en mode multiplication de Photoshop.

Le <div> aurait position: fixed, le contenu ci-dessous changerait donc rapidement.

Est-ce possible avec n'importe quelle astuce HTML5/CSS3/canvas/SVG?

csshtmlcanvassvgblending
35
Ernests Karlsons

J'ai créé une bibliothèque open source séparée et légère pour effectuer des modes de fusion de style Photoshop d'un contexte HTML Canvas à un autre: context-blender . Voici l'exemple d'utilisation:

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

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

Consultez le README pour plus d'informations, y compris les modes de fusion actuellement pris en charge.

Vous pouvez l'utiliser pour effectuer une multiplication d'un canevas à un autre, mais pas sur des éléments HTML standard.

27
Phrogz

Non (pas nativement) mais ça arrive bientôt: http://blogs.Adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/

12
Lea Verou

Vous pouvez également consulter cette démo: http://media.chikuyonok.ru/canvas-blending/ pour voir comment procéder avec le canevas.

Vérifiez la source des formules des modes de fusion et comment les appliquer (les formules sont beaucoup plus lisibles que dans pixastic ou context-blender).

7
Georgii Ivankin

Ce n'est pas HTML5, mais c'est aussi proche que possible de ce que vous demandez.

modes de mélange Javascript (OpenGL).

Je ne pense pas que les "modes de fusion" comme Photoshop puissent être émulés avec du HTML pur, à moins que le langage ne prenne un virage serré dans une autre direction. Mais ce serait formidable de voir un moyen plus simple de le faire.

2
Kyle

Je suis également très intéressé à le faire. Beaucoup de mises en page que j'ai codées pour les concepteurs visuels auraient pu utiliser cela. Mis à part les autres articles de ce fil, il existe un moyen de le faire, actuellement uniquement dans Firefox 4, sans utiliser OpenGl ou Canvas. C'est à travers l'utilisation de filtres SVG. Apparemment, c'est sur les nuisettes de Webkit et Chrome aussi, mais je ne voyais rien de bien fonctionner encore.

Voici quelques démos et explications:

À mon humble avis, quelque chose de proche des modes de fusion est trop difficile à réaliser en ce moment. Il est très difficile de trouver des références sur feConvolveMatrix, feSpecularLighting ou feColorMatrix, et les exemples sont tout simplement impossibles à comprendre pour moi. Ils pourraient fonctionner mais je ne sais pas comment.

Je souhaite quelque chose comme EffectGames suggéré :

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

Ce serait une bien meilleure approche. Peut-être que certains ninja là-bas qualifiés en mathématiques pourraient nous faire une librairie pour le faire.

EDIT: Il existe une spécification SVG plus simple pour effectuer exactement les modes de fusion. Mais aucun navigateur que j'ai testé ne fonctionne (FF4, IE9, Opera11, Webkit Nightly): http://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html - Mais Je ne sais pas non plus si cela sera possible à utiliser dans les éléments HTML-DOM.

2
Irae Carvalho

Vous pouvez déjà l'utiliser avec un simple CSS (pas de Canvas). Exemple:

mix-blend-mode: 'multiply'

Internet Explorer peut ne pas le prendre en charge, mais les autres navigateurs le font.

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

1
Antonio Brandao

C'est le plus proche que j'ai v , et oui, tous les actifs doivent être dans le canevas. Notez qu'Internet Explorer commence à prendre en charge le canevas dans la version 9 qui n'est pas encore sortie, donc si vous devez prendre en charge IE <9, vous devrez utiliser une solution de contournement.

1
Luis

Il a atterri dans Chrome Canary devrait donc arriver bientôt. http://blogs.Adobe.com/webplatform/2013/04/23/all-blend-modes-for- css-fragment-shaders-have-landed /

1
Ric

J'ai implémenté les modes de fusion les plus populaires connus de gimp/photoshop en utilisant canvas dans http://canvasquery.com/ mais il ne convient pas pour relatime.

Cela changera avec l'introduction de modes de fusion natifs dans le canevas

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

0
rezoner

En fonction des images impliquées et de l'effet exact que vous recherchez, vous pourriez être en mesure de créer des couches créatives d'images et de dégradés CSS pour obtenir l'effet souhaité:

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

0
Jonathon Hill