Share
Dans le didacticiel précédent, vous avez appris à créer un éditeur d'image à l'aide de CamanJS, qui peut appliquer des filtres de base tels que le contraste, la luminosité et le bruit à une image. CamanJS possède également d’autres filtres intégrés, tels que Nostalgia, Pinhole, Sunrise, etc., que nous avons appliqués directement à l’image..
Dans ce didacticiel, nous aborderons certaines fonctionnalités plus avancées de la bibliothèque telles que les calques, les modes de fusion et les événements..
Dans le premier tutoriel, nous ne travaillions qu'avec un seul calque contenant notre image. Tous les filtres que nous avons appliqués ne manipulent que cette couche principale. CamanJS vous permet de créer plusieurs calques pour vous permettre d’éditer vos images de manière plus sophistiquée. Vous pouvez créer des calques imbriqués, mais ils seront toujours appliqués sur leur calque parent comme une pile..
Chaque fois que vous créez un nouveau calque et que vous l'appliquez au calque parent, le mode de fusion utilisé par défaut est Ordinaire. Vous pouvez créer un nouveau calque sur la toile à l’aide des touches Nouvelle Couche() méthode. Lorsque vous créez un nouveau calque, vous pouvez également transmettre une fonction de rappel qui vous sera utile si vous souhaitez manipuler un calque..
Cette fonction peut être utilisée pour de nombreuses tâches, telles que la définition du mode de fusion du nouveau calque à l'aide de la commande setBlendingMode () méthode. De même, vous pouvez contrôler l’opacité du nouveau calque à l’aide des touches opacité() méthode.
Tout nouveau calque que vous créez peut être rempli d’une couleur unie à l’aide des touches la couleur de remplissage() méthode. Vous pouvez également copier le contenu du calque parent dans le nouveau calque en utilisant le copyParent () méthode. Tous les filtres décrits dans le didacticiel précédent peuvent également être appliqués au nouveau calque que nous créons. Par exemple, vous pouvez augmenter la luminosité du calque nouvellement créé en utilisant this.filter.brightness (10).
Au lieu de copier le parent ou de remplir le calque avec une couleur unie, vous avez également la possibilité de charger toute autre image du calque et de la superposer sur le parent. Comme pour l'image principale, vous pourrez également appliquer différents filtres à l'image superposée..
Dans l'extrait de code suivant, nous avons associé un gestionnaire d'événements click à trois boutons qui remplissent respectivement le nouveau calque avec une couleur unie, le calque parent et une image de recouvrement..
Accentsconagua
$ ('# orange-btn'). on ('click', fonction (e) Caman ("# canvas", fonction () this.newLayer (function () this.opacity (50); this.fillColor ('# ff9900');); this.render (););); $ ('# parent-btn'). sur ('clic', fonction (e) Caman ("# toile", fonction () this.newLayer (function () this.opacity (50); this.copyParent (); this.filter.brightness (20);); this.render (););); $ ('# overlay-btn'). on ('click', fonction (e) var oImg = new Image (); oImg.src = "trees.png"; Caman ("# canvas", function () this.newLayer (function () this.opacity (50); this.overlayImage (oImg); this.filter.brightness (20);); this.render ();));Dans la section précédente, nous avons conservé l'opacité de tout nouveau calque ajouté au canevas à une valeur inférieure à 100. Cela était dû au fait que le nouveau calque masquerait complètement l'ancien calque. Lorsque vous placez un calque sur un autre, CamanJS vous permet de spécifier un mode de fusion qui détermine le résultat final après le placement. Le mode de fusion est défini sur Ordinaire par défaut.
Cela signifie que tout nouveau calque que vous ajoutez sur le canevas le rendra invisible. La bibliothèque dispose de dix modes de fusion au total. Ceux-ci sont Ordinaire, multiplier, écran, recouvrir, différence, une addition, exclusion, Lumière douce, exclusion, et assombrir.
Comme je l'ai mentionné plus tôt, le Ordinaire mode de fusion définit la couleur finale pour être égale à la couleur du nouveau calque. le multiplier Le mode de fusion détermine la couleur finale d’un pixel en multipliant les canaux individuels, puis en divisant le résultat par 255. différence et une addition Les modes de fusion fonctionnent de manière similaire, mais ils soustraient et ajoutent les canaux..
le assombrir Le mode de fusion définit la couleur finale d'un pixel sur la valeur la plus basse des canaux de couleur individuels. le alléger Le mode de fusion définit la couleur finale d'un pixel comme étant égale à la valeur la plus élevée des canaux de couleur individuels. le exclusion mode de fusion est un peu similaire à différence, mais cela fixe le contraste à une valeur inférieure. Dans le cas du écran mode de fusion, la couleur finale est obtenue en inversant les couleurs de chaque couche, en les multipliant, puis à nouveau en inversant le résultat.
le recouvrir mode de fusion agit comme multiplier si la couleur de fond est plus sombre, et il agit comme écran si la couleur de fond est plus claire.
Si vous souhaitez que les couleurs des différentes couches interagissent de manière différente, CamanJS vous permet également de définir vos propres modes de fusion. Nous allons couvrir cela dans le prochain tutoriel de la série.
Voici le code JavaScript pour appliquer différents modes de fusion à une image:
$ ('# multiplier-btn'). sur ('cliquer', fonction (e) hexColor = $ ("# hex-color"). val (); Caman ("# canvas", function () this. revert (false); this.newLayer (function () this.fillColor (hexColor); this.setBlendingMode ('multiply');); this.render ();)); $ ('# screen-btn'). on ('click', fonction (e) hexColor = $ ("# hex-color"). val (); Caman ("# canvas", function () this. revert (false); this.newLayer (function () this.fillColor (hexColor); this.setBlendingMode ('screen');); this.render ();));Dans l'extrait de code ci-dessus, nous obtenons la valeur de couleur Hex d'un champ de saisie. Cette couleur est ensuite appliquée sur le nouveau calque. Vous pouvez écrire le code pour appliquer d'autres modes de fusion de la même manière.
Essayez de spécifier une couleur de votre choix dans le champ de saisie, puis appliquez l’un des modes de fusion en cliquant sur le bouton correspondant. J'ai appliqué les modes de fusion sur une couleur unie dans l'exemple, mais vous pouvez également les appliquer sur une image superposée de la section précédente..
Si vous avez chargé une grande image dans la démo du premier ou du deuxième tutoriel, vous avez peut-être remarqué que le résultat de tout filtre appliqué ou mode de fusion est devenu évident après un certain temps..
Les grandes images ont beaucoup de pixels et le calcul de la valeur finale de différents canaux pour chaque pixel après l'application d'un mode de fusion spécifique peut prendre beaucoup de temps. Par exemple, lors de l’application du multiplier mode de fusion sur une image de dimensions 1920 * 1080, l’appareil devra effectuer la multiplication et la division plus de 6 millions de fois.
Dans de tels cas, vous pouvez utiliser des événements pour donner aux utilisateurs des indications sur la progression d'un filtre ou d'un mode de fusion. CamanJS a cinq événements différents qui peuvent être utilisés pour exécuter des fonctions de rappel spécifiques à différentes étapes. Ces cinq événements sont processStart, processusComplete, renduFinished, blockStarted, et blockFinished.
le processStart et processusComplete les événements sont déclenchés après le début ou la fin d'un processus de rendu d'un filtre. Lorsque tous les filtres que vous avez spécifiés ont été appliqués sur une image, la bibliothèque déclenche la renduFinished un événement.
CamanJS divise les grandes images en blocs avant de commencer à les manipuler. le blockStarted et blockFinished les événements sont déclenchés après le traitement par la bibliothèque de blocs individuels de l'image.
Dans notre exemple, nous utiliserons uniquement le processStart et renduFinished événements pour informer les utilisateurs sur les progrès de notre opération de retouche d'image.
Caman.Event.listen ("processStart", fonction (process) $ (". Process-message"). Text ('Application' + process.name);); Caman.Event.listen ("renderFinished", function () $ (". Process-message"). Text ("Done!"););Avec le processStart et processFinish événements, vous avez accès au nom du processus en cours d’exécution sur l’image. le blockStarted et blockFinished les événements, en revanche, vous donnent accès à des informations telles que le nombre total de blocs, le bloc en cours de traitement et le nombre de blocs terminés.
Essayez de cliquer sur n’importe quel bouton dans la démo ci-dessous et vous verrez le nom du processus manipulant actuellement l’image dans la zone située au-dessous du canevas..
Le premier tutoriel de la série vous a montré comment créer un éditeur d'image de base avec les filtres intégrés à partir de la bibliothèque CamanJS. Ce tutoriel vous a montré comment utiliser plusieurs couches et appliquer différents filtres et modes de fusion à chaque couche individuellement..
Comme le processus de retouche d'images peut prendre un certain temps pour les grandes images, nous avons également appris à indiquer aux utilisateurs que l'éditeur d'images traite réellement l'image et ne reste pas inactif.
Dans le prochain et dernier didacticiel de la série, vous apprendrez à créer vos propres modes de fusion et filtres dans CamanJS. Si vous avez des questions concernant ce tutoriel, n'hésitez pas à me le faire savoir dans les commentaires..
