Création de filtres photo de style Instagram avec jQuery (JavaScript)

J'ai toujours été intrigué par le phénomène Instagram et la rapidité avec laquelle il est devenu populaire. Les filtres photo ne sont pas nouveaux, mais leur utilisation dynamique n'a pas toujours été possible. La création de la fonctionnalité dans une application iOS / Android nécessite beaucoup de temps. Heureusement, les développeurs ont travaillé pour reproduire ce processus sur le Web à l'aide de JavaScript.

Dans ce tutoriel, je veux montrer comment créer une application Web de filtre de style Instagram simple à l'aide de jQuery. La bibliothèque s'appelle CamanJS. Elle est facilement extensible pour créer vos propres plugins de filtres. Cela ne nécessite pas jQuery mais j'ai choisi de l'utiliser pour un environnement de développement plus simple. Jetez un coup d’œil à mon exemple de démonstration en direct pour comprendre le but de ce tutoriel.

Live Demo - Télécharger le code source

Commencer

D'abord, j'ai téléchargé une copie locale de jQuery avec la bibliothèque CamanJS sur Github. Je devrais souligner que vous devez héberger vos fichiers sur un serveur localhost ou externe afin de tester les effets de travail. Ceci est lié à un problème avec l'hôte d'origine des éléments Canvas qui peut être assez déroutant si vous êtes novice dans cette idée.

Pour résumer: ne soyez pas surpris si vous ouvrez les fichiers localement et qu'ils ne fonctionnent pas. Vous aurez besoin de les héberger quelque part pour tester cela.

Mon fichier d'index a beaucoup de commentaires supplémentaires sur la manière dont vous pouvez implémenter Caman. J'ai créé une liste de liens de navigation qui appliquent des filtres stables au-dessus de l'image préexistante. Vous trouverez ci-dessous une copie de tout mon corps HTML:

   <h1>Filtres photo de style Instagram</h1>  Réinitialiser la luminosité de la photo Bruit Sépia Contraste Ajouter Bleu

Notez le commentaire masquant une image avec l'ID #mainpic. Ceci utilise des attributs de données HTML5 comme data-caman-hidpi et data-caman. Vous pouvez en réalité définir un nombre de filtres prédéfinis qui se chargent immédiatement sur la photo. Cela génère un nouvel élément de toile directement dans la page sans écrire de code JavaScript.

Mais comme nous voulons approfondir un peu plus, j'ai créé un seul élément de canevas avec l'ID. #maincanvas. Ceci sera utilisé pour charger la photo puis appliquer des filtres à plusieurs reprises jusqu'à ce que la toile soit réinitialisée.

Génération de l'image de toile

Au bas de ma page HTML, j'ai écrit tout le JavaScript dans une paire de Mots clés. Chaque lien a son propre gestionnaire d'événements de clic pour appliquer différents degrés de filtres sur le canevas.

 var canvas = $ ('# maincanvas'); var ctx = canvas [0] .getContext ("2d"); var $ reset = $ ('# resetbtn'); var $ luminosité = $ ('# éclatement'); var $ noise = $ ('# noisebtn'); var $ sepia = $ ('# sepiabtn'); var $ contrast = $ ('# contrastbtn'); var $ color = $ ('# colorbtn');

La variable Toile cible l'élément en tant qu'objet jQuery, mais ce n'est pas l'élément canvas naturel. Nous obtenons la toile elle-même en utilisant toile [0] ce qui est utile pour obtenir des détails en utilisant getContext (). De manière générale, ce contexte nous permet d’écrire et de réécrire des objets sur la toile à partir de JavaScript. Les liens de filtre obtiennent leurs propres variables jQuery afin que nous puissions les identifier rapidement à chaque événement de clic.

 $ reset.on ('click', fonction (e) {e.preventDefault (); var img = nouvelle Image (); img.src = "img / city.jpeg"; ctx.save (); ctx.setTransform ( 1, 0, 0, 1, 0, 0); ctx.clearRect (0, 0, canvas [0] .width, canvas [0] .height); ctx.restore (); ctx.drawImage (img, 0, 0); Caman ('# maincanvas', 'img / city.jpeg', function () {this.revert (false); this.render ();});});

Chaque fois que vous cliquez sur le bouton de réinitialisation, le canevas doit supprimer tous les filtres et intégrer de nouveau l'image sur la page. Cela a pris beaucoup de recherches pour comprendre comment effacer la toile de tout contexte, puis rajouter l'image sans aucun filtre CamanJS. Jetez un coup d'œil à cet article de Stack Overflow, qui est un peu plus détaillé.

Fondamentalement, nous réinitialisons le canevas à la même largeur / hauteur mais en supprimant tout le contexte. Le nouveau contexte est redessiné en créant un élément d'image dynamique à l'aide de JavaScript. Caman a une méthode nommée revenir() supprimer tous les filtres et recommencer.

Méthodes de filtrage

Le reste de mon code est bloqué dans les gestionnaires d'événements de clic. Cela signifie que chaque fois qu'un utilisateur clique sur l'un des liens de navigation, la fonction est traitée différemment. J'ai incorporé un certain nombre de filtres par défaut de Caman, mais il en existe beaucoup d'autres qui méritent d'être explorés.

 $ luminosité.on ('clic', fonction (e) {e.preventDefault (); Caman ('# maincanvas', 'img / city.jpeg', fonction () {this.brightness (10); this.contrast ( 0); this.render (function () {// une fonction de rappel après le rendu});});}); $ noise.on ('click', fonction (e) {e.preventDefault (); Caman ('# maincanvas', 'img / city.jpeg', function () {this.noise (10); this.render ( );});}); $ contrast.on ('click', fonction (e) {e.preventDefault (); Caman ('# maincanvas', 'img / city.jpeg', function () {this.contrast (10); this.render ( );});}); $ sepia.on ('click', fonction (e) {e.preventDefault (); Caman ('# maincanvas', 'img / city.jpeg', function () {this.sepia (20); this.render ( );});});

Ce sont les quatre premiers gestionnaires d'événements qui ajoutent de la luminosité, du bruit, du contraste et des couleurs sépia à la photo. La valeur numérique transmise à la méthode définit la force du filtre à appliquer. Les numéros vont généralement de 0 à 100, mais cela dépend vraiment de la méthode appelée.

La syntaxe est très facile à comprendre une fois que vous l'avez vraiment examinée. Caman () est la méthode d’initialisation qui prend d’abord le sélecteur de canevas, suivi de l’image à filtrer.Ensuite, dans une fonction de rappel, nous définissons quels filtres doivent être appliqués. Les filtres sont appliqués sur le canevas d’image en utilisant rendre().

Chacun de ces filtres se composera avec le temps. Ainsi, par exemple, si vous cliquez deux fois sur Sépia, vous obtiendrez deux effets de filtre répétés en utilisant des tons sépia. J'ai tout gardé à une valeur inférieure de 10-20 afin que vous puissiez regarder la différence incrémentale.

 $ color.on ('clic', fonction (e) {e.preventDefault (); Caman ('# maincanvas', 'img / city.jpeg', fonction () {this.colorize ("# 3c69da", 10) ; // syntaxe alternative // this.colorize (60, 105, 218, 10); this.render ();});});

Mon dernier événement de bouton ajoute une très légère superposition de couleurs à l'image. Cela se comporte comme un filtre d'opacité utilisant une couleur unie comme arrière-plan. Notez que la syntaxe acceptera les valeurs de couleur RVB ou hexadécimales. Jetez un coup d'œil à la fonctionnalité intégrée de Caman pour trouver encore plus d'effets de filtre.

Live Demo - Télécharger le code source

Fermeture

Il n'y aura probablement pas trop de projets pour lesquels vous devrez reproduire ces effets photo. Mais il est toujours amusant de se familiariser avec les nouvelles bibliothèques JS, et on ne sait jamais quand cela pourrait être applicable. N'hésitez pas à télécharger une copie de mon code source et à voir ce que vous pouvez construire d'autre. De plus, si vous avez des questions ou des commentaires, déposez quelques idées dans les commentaires ci-dessous.