Création d'un éditeur d'image à l'aide de CamanJS Application de filtres de base

Il y a quelque temps, j'ai écrit des tutoriels décrivant comment appliquer différents types de filtres et de modes de fusion à une image à l'aide de CSS. Cela peut s'avérer très utile lorsque vous souhaitez afficher la version en niveaux de gris, floue ou contrastée de la même image. Au lieu de créer quatre images différentes, vous pouvez simplement appliquer ces effets à l'image d'origine à l'aide de quelques lignes de code CSS.. 

L'utilisation de filtres CSS et de modes de fusion fonctionne bien dans la plupart des cas. Cependant, CSS ne modifie pas les pixels de l'image elle-même. En d'autres termes, les filtres et les modes de fusion ou tout autre effet ne sont pas permanents. 

Si quelqu'un télécharge une image avec des filtres CSS appliqués, il obtiendra l'image d'origine et non la version modifiée. Cela peut constituer un inconvénient majeur si vous envisagiez de créer un éditeur d'images pour vos utilisateurs..

Si vous souhaitez que les modifications d'image soient permanentes et permettent à l'utilisateur de télécharger l'image modifiée, vous pouvez utiliser la toile HTML5. le Toile element vous permet de faire beaucoup de choses, y compris dessiner des lignes et des formes, écrire du texte et rendre des animations. 

Dans ce tutoriel, nous allons nous concentrer sur la modification des images chargées sur le canevas. CSS3 possède déjà une fonctionnalité intégrée vous permettant d'appliquer directement des effets tels que le contraste, la luminosité et le flou. Lors de l'utilisation du canevas HTML5, nous utiliserons une bibliothèque de manipulation de canevas appelée CamanJS pour éditer les images.. 

La bibliothèque prend en charge les effets de base tels que la luminosité, le contraste et la saturation. Cela nous fera gagner du temps et nous permettra de créer des filtres plus sophistiqués basés sur ces filtres de base..

Les bases de CamanJS

Le nom de cette bibliothèque est basé sur le fait qu’elle est utilisée pour faire (ca) nvas (man) ipulation en JavaScript (JS). Avant de pouvoir utiliser différentes fonctionnalités de la bibliothèque, vous devez l’inclure dans votre projet. Cela peut être fait soit en téléchargeant la bibliothèque et en l’hébergeant vous-même, soit en vous connectant directement à un CDN..

Il y a deux façons d'utiliser la bibliothèque. La première option consiste à utiliser le data-caman attribuer avec vos éléments d'image. Cet attribut peut accepter une combinaison de différents filtres CamanJS comme valeur. Par exemple, si vous souhaitez augmenter la luminosité d'une image de 20 et le contraste de 10, vous pouvez utiliser le code HTML suivant:

De la même manière, vous pouvez appliquer d'autres filtres tels que la saturation, l'exposition, le bruit, les sépia, etc. Outre les filtres de base, CamanJS vous donne également accès à des filtres plus sophistiqués et prêts à l'emploi. Ces filtres peuvent être appliqués à une image de la même manière. Appliquer le lever du soleil filtre, vous pouvez simplement utiliser le code HTML suivant:

Votre deuxième option pour manipuler des images est en appelant Caman () avec le identifiant de la toile sur laquelle vous avez rendu l'image et les différents filtres que vous souhaitez appliquer à l'image rendue.

Caman ('# canvas-id', function () this.brightness (20); this.contrast (10); this.render (););

Dans cette série, nous allons utiliser JavaScript pour créer notre éditeur d'images..

Mise en œuvre des fonctionnalités de téléchargement et de téléchargement

Vous devez fournir aux utilisateurs un moyen de télécharger les images qu'ils souhaitent modifier afin de pouvoir les restituer sur le fond pour les manipuler davantage. Une fois que les utilisateurs ont effectué les modifications, ils devraient également pouvoir télécharger les images modifiées. Dans cette section, nous allons ajouter ces deux fonctions à notre éditeur d'images..

Commençons par le code HTML nécessaire pour ajouter le canevas et les boutons de téléchargement:

   
 
  Télécharger une photo Télécharger l'image 
 

Voici le code pour implémenter la fonctionnalité de téléchargement d’image de base:

var img = new Image (); var canvas = document.getElementById ('canvas'); var ctx = canvas.getContext ('2d'); var fileName = "; $ (" # fichier-upload "). on (" changement ", fonction () fichier-var = document.querySelector ('# fichier-upload'). files [0]; var reader = new FileReader (); if (fichier) nomfichier = nomfichier; reader.readAsDataURL (fichier); reader.addEventListener ("load", function () img = new Image (); img.src = reader.result; img .onload = function () canvas.width = img.width; canvas.height = img.height; ctx.drawImage (img, 0, 0, img.width, img.height); $ ("# canvas"). removeAttr ("data-caman-id");, false););

Nous commençons par créer des variables pour stocker le nom du fichier image sélectionné par l'utilisateur et le contexte de notre toile. Après cela, nous écrivons le code pour obtenir le fichier image à partir du fichier. contribution après sa changement l'événement est déclenché. Les fichiers sélectionnés par un utilisateur sont stockés dans une Liste de fichiers, et nous pouvons obtenir le premier fichier de la liste en utilisant .fichiers [0]. 

Une fois que nous avons le fichier, nous utilisons un FileReader objet pour lire le contenu du fichier sélectionné par l'utilisateur. le en charge événement pour le FileReader est déclenché après la lecture du fichier sélectionné. 

À l'intérieur de en charge gestionnaire d'événements pour le FileReader objet, nous créons un HTMLImageElement exemple en utilisant le Image() constructeur. le src attribut de l'image est ensuite défini sur la valeur de la propriété de résultat de notre FileReader. 

Une fois l’image chargée avec succès, nous définissons la largeur et la hauteur de notre toile pour qu’elles soient égales à la largeur et la taille de l'image sélectionnée par l'utilisateur. Après cela, nous dessinons l’image sur la toile et retirons le data-caman-id attribut de la toile. 

Cet attribut est ajouté automatiquement par CamanJS lors de la configuration du canevas pour l'édition d'une image. Nous devons le supprimer à chaque fois qu'un utilisateur sélectionne un nouveau fichier afin d'éviter toute confusion entre l'ancien fichier image que nous étions en train de modifier et le nouveau fichier sélectionné par l'utilisateur..

Outre le chargement du fichier image dans le canevas, nous avons également défini la valeur du nom de fichier variable égale au nom du fichier sélectionné par l'utilisateur. Cela sera utile lorsque nous sauvegardons l'image modifiée..

Les utilisateurs pourront désormais télécharger différentes images dans votre éditeur d'images. Une fois l'image modifiée, ils aimeraient également la télécharger. Ecrivons du code qui permettra aux utilisateurs de sauvegarder le fichier image édité.

$ ('# download-btn'). on ('click', fonction (e) var fileExtension = nomFichier.slice (-4); if (fileExtension == '.jpg' || fileExtension == '.png' ) var actualName = fileName.substring (0, fileName.length - 4); télécharger (canevas, actualName + '-edited.jpg');); téléchargement de fonction (canvas, nom de fichier) var e; var lnk = document.createElement ('a'); lnk.download = nom du fichier; lnk.href = canvas.toDataURL ("image / jpeg", 0.8); if (document.createEvent) e = document.createEvent ("MouseEvents"); e.initMouseEvent ("clic", vrai, vrai, fenêtre, 0, 0, 0, 0, 0, faux, faux, faux, faux, 0, nul); lnk.dispatchEvent (e);  else if (lnk.fireEvent) lnk.fireEvent ("onclick"); 

Nous utilisons le jQuery .sur() méthode pour exécuter un morceau de code à chaque fois que le Cliquez sur L'événement est déclenché pour le bouton de téléchargement. Ce code supprime l'extension du nom du fichier image sélectionné par l'utilisateur et le remplace par le suffixe. -edité.jpg. Ce nom est ensuite transmis à la Télécharger fonctionner avec une référence à la toile où nous avons rendu et édité l'image. 

La fonction de téléchargement crée un lien et définit sa Télécharger attribuer à nom de fichier. le href attribut contient l'URI des données pour l'image modifiée. Après avoir défini la valeur de ces deux attributs, nous activons par programme l'événement click pour notre lien nouvellement créé. Ce clic lance le téléchargement de l'image modifiée.

Application de filtres intégrés

Comme je l'ai mentionné au début du didacticiel, CamanJS est livré avec des filtres intégrés de base. Ainsi, vous pouvez appliquer directement la luminosité, le contraste, le sépia, la saturation, l'exposition, le bruit, la netteté, la vibrance et la teinte. Certains filtres comme la luminosité et le contraste peuvent avoir une valeur négative ou positive.. 

Vous pouvez définir des valeurs aussi élevées ou aussi basses que vous le souhaitez, mais un choix judicieux consisterait à les conserver entre -100 et 100. Par exemple, l'image devient blanche lorsque vous définissez la luminosité sur 100. Par conséquent, toute valeur supérieure à 100 être inutile. De même, l'image deviendra complètement grise si vous définissez la valeur du contraste sur -100.

D'autres filtres, tels que sépia, bruit, netteté et flou, n'acceptent qu'une valeur positive. N'oubliez pas que le filtre de teinte couvre tout le cercle de 360 ​​degrés, avec des valeurs comprises entre 0 et 100. L'image sera exactement la même lorsque vous définissez la teinte sur 0 ou 100..

Voici le code HTML à ajouter pour notre éditeur d’image:

 
 - Luminosité + 
  
 - Gamma + 
 
 
  Télécharger une photo Télécharger l'image 
 Ancien  Lomo 

Tous les filtres comme la luminosité et le contraste ont été augmentés et diminués. Cependant, le bouton de diminution a été désactivé pour certains filtres tels que le bruit, car ils ne peuvent pas avoir de valeur négative significative..

Nous appliquerons les filtres respectifs en fonction du bouton cliqué à l'aide du code JavaScript suivant..

/ * Code similaire pour tous les autres boutons * / $ ('# luminosité-inc'). On ('clic', fonction (e) Caman ('# canvas', img, fonction () this.brightness (10) .render (););); $ ('# luminosité-dec'). sur ('clic', fonction (e) Caman ('# toile', img, fonction () this.brightness (-10) .render ();) ) / * Code similaire pour tous les filtres intégrés * / $ ('# nostalgia-btn'). Sur ('clic', fonction (e) Caman ('# canvas', img, fonction () this.nostalgia (). render (););); $ ('# majestic-btn'). on ('click', fonction (e) Caman ('# canvas', img, fonction () this.herMajesty (). render ();));

Pour les boutons d’augmentation et de diminution, la force du filtre dépend de l’échelle de son effet. Par exemple, la luminosité et le contraste sont augmentés de 10, mais la valeur gamma n’augmente que de 0,1 après chaque clic..

La démo suivante de CodePen montre l’éditeur d’images CamanJS créé en action..

Certains filtres peuvent prendre un certain temps avant de voir leur résultat final. Dans ce cas, les utilisateurs peuvent penser que le filtre ne fonctionne pas. Nous utiliserons des événements pour tenir les lecteurs au courant de la progression d’un filtre. Tout cela sera discuté dans le prochain tutoriel.

Dernières pensées

Le premier tutoriel était destiné à vous apprendre à créer un éditeur d'images doté des fonctionnalités de base de téléchargement et de téléchargement d'images, que les utilisateurs peuvent utiliser pour éditer des images. Nous avons utilisé des filtres de base tels que le bruit, le contraste et la luminosité, ainsi que des effets plus complexes tels que Vintage et Nostalgia, intégrés à la bibliothèque..

.