1. Accueil
  2. Question et réponse
  3. Est-ce que les modes de fusion Photoshop sont possibles en HTML5?

Est-ce que les modes de fusion Photoshop sont possibles en HTML5?

2010-11-25 3 views
34

Je souhaite placer un élément rectangulaire rouge <div> au-dessus de ma page Web afin qu'il soit non seulement transparent, mais aussi qu'il soit mélangé dans le mode Multiply de Photoshop.Est-ce que les modes de fusion Photoshop sont possibles en HTML5?

Le <div> aurait position: fixed, donc le contenu au-dessous changerait rapidement. Est-ce possible avec n'importe quel tour HTML5/CSS3/canvas/SVG?

Source

2010-11-25 Ernests Karlsons

Répondre

27

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

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

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

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

Vous pouvez utiliser cette option pour effectuer une multiplication d'un canevas à un autre, mais pas au-dessus des éléments HTML standard.

Source

2010-12-03 22:53:56 Phrogz

2

Ce n'est pas HTML5, mais c'est aussi proche que je peux trouver pour ce que vous demandez.

Javascript blending modes (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 tournant dans une autre direction. Mais ce serait génial de voir un moyen plus facile de le faire.

Source

2010-11-25 12:54:52 Kyle

+1

il montre le mélange sur quelque chose qui est déjà là, dans la toile. mais, je suppose, je ne peux pas appliquer le mélange à quelque chose qui est au-dessous de toile, car cela exigerait le canevas pour capturer le contenu de fenêtre, mais, au moins dans firefox, cela n'est pas autorisé aux applications Web. –

1

This is the closest I have seen, et oui, tous les actifs doivent être dans la zone de dessin. Notez qu'Internet Explorer commence à prendre en charge le canevas dans la version 9 qui n'est pas encore disponible, donc si vous devez prendre en charge IE < 9, vous devrez utiliser une solution de contournement.

Source

2011-01-20 15:51:53 Luis

+0

Oui, la bibliothèque Pixastic [http://www.pixastic.com] a l'air plutôt cool. Merci pour le lien. BTW, IE 9 a été publié en Mars, donc peut-être une option maintenant. –

2

Je suis également très intéressé à le faire. Beaucoup de mises en page que j'ai codé pour les concepteurs visuels auraient pu l'utiliser. Mis à part les autres messages de ce sujet, il existe un moyen de le faire, actuellement uniquement dans Firefox 4, sans utiliser OpenGl ou Canvas. C'est par l'utilisation de filtres SVG. Aparrently il est sur Nighties de Webkit et Chrome aussi, mais je ne pouvais rien voir fonctionner pour le moment.

Voici quelques démos et des explications:

à mon humble avis Anyware quelque chose proche de modes de fusion sont trop durs pour atteindre maintenant. 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 travailler mais je ne sais pas comment.

Je souhaite quelque chose comme EffectGames suggested:

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

Ce serait une façon meilleure approche. Peut-être que certains ninjas là-bas en mathématique pourraient nous faire un don pour cela.

EDIT: Il y a une spécification SVG plus facile à faire fondre exactement les modes. Mais aucun navigateur que je l'ai testé avoir ce travail (FF4, IE9, Opera11, Webkit nuit): http://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html - Mais je ne sais pas même si cela sera possible d'utiliser des éléments DOM HTML.

Source

2011-04-28 06:42:31

7

Vous pouvez également consulter cette démo: http://media.chikuyonok.ru/canvas-blending/ pour voir comment faire avec de la toile.

Vérifiez la source pour le mélange des formules de modes et comment les appliquer (formules sont beaucoup plus lisible que dans un mélangeur contexte pixastic ou).

Source

2011-09-15 21:08:45

+0

Ceci est un homme de démonstration génial! L'avez-vous fait? Puis-je utiliser le code pour un mélange normal dans mon propre travail? J'ai essayé de visiter la racine pour contacter l'auteur, mais il a jeté un 404! –

+0

Non, ce n'est pas moi, c'est par le célèbre homme front-end russe Sergey Chikuyonok (l'homme derrière Zen Coding, btw) :) Dans le [article] (http://chikuyonok.ru/2011/08/optimize- with-canvas /) il appelle à se sentir libre avec le code dans la démo, mais vous pouvez le contacter via [comments] (http://chikuyonok.ru/2011/08/optimize-with-canvas/#comments), ou voir le pied de page de son email. –

+0

Merci mon pote! Je vais l'envoyer! Cet article a beaucoup de bonnes choses pour Canvas! :) –

12

Non (pas nativement), mais il est à venir: http://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/

Source

2012-04-16 03:21:03

+3

+1; leur brouillon spec peut être juste la chose dont j'avais besoin pour obtenir 100% des modes de mélange compatibles Photoshop en présence d'alpha réduit! (Et j'espère que la bibliothèque ne sera plus nécessaire du tout.) – Phrogz

+0

Fonctionne dans la version bêta de Chrome si vous activez les fonctionnalités expérimentales de la plateforme Web. http://jsfiddle.net/X4GyF/ –

+1

Juste pour l'enregistrement, maintenant en mode par défaut dans Chrome, FF et Opera – vals

Questions connexes

 Questions connexes