Javascript Fun : créez une application d'effets photo !

1. Bienvenue dans le cours !: Hé, bienvenue dans ce cours. Si vous êtes un débutant en développement web et que vous voulez simplement sauter et construire des projets amusants, vous êtes au bon endroit. L' idée derrière cette série est de vous montrer ce que vous pouvez faire avec HTML, CSS et JavaScript standard. Je ne confond aucun framework, aucun standard, aucune bibliothèque ou aucun modèle. Au lieu de cela, nous allons tout construire complètement à partir de zéro, étape par étape pour vous montrer comment ces technologies libres fonctionnent toutes ensemble. Avec ce projet, nous allons créer une application d'effets photo. Cela va impliquer la création d'un chargeur de photos où nous pouvons sélectionner l'image à partir de notre ordinateur. J' en sélectionne un juste ici, et une fois que nous l'ouvrons, ce fichier sera alors affiché dans le navigateur. C' est l'image originale, puis sur la droite nous avons quelques options pour changer l'effet. Nous pouvons changer cela pour être en niveaux de gris. Nous pouvons ajouter des choses comme un effet Sépia. On peut inverser les couleurs. Les images sont composées de pixels qui sont des valeurs rouges, vertes et bleues. Nous avons également quelques options pour changer l'ordre de ces couleurs aussi. Cela nous donne un bel effet de look, qui peut vraiment changer l'apparence et la sensation de nos images. Une fois que nous avons terminé et que nous avons une belle image que vous voulez utiliser, nous pouvons également télécharger cette image aussi. Ce projet vous donnera l'occasion d'apprendre beaucoup de choses nouvelles. Nous allons créer une interface utilisateur avec HTML. Nous allons ensuite ajouter le style avec CSS. Mais l'accent principal dans cette vidéo sera le JavaScript, et aussi travailler avec des pixels. Vous apprendrez à télécharger des images, créer des objets de lecteur de fichiers, à dessiner sur le canevas HTML. Ensuite, une fois que nous aurons cette image dans la toile, vous apprendrez à lire tous les pixels de cette image. Nous allons ensuite parcourir tous ces pixels et appliquer divers effets. Nous apprendrons également comment rétablir l'image originale et télécharger également la version modifiée. Si cela semble vraiment complexe, ne vous inquiétez pas. Ce cours est conçu pour les débutants. Cependant, peu de connaissances JavaScript serait un réel avantage, et idéalement ce devrait être le cinquième projet que vous tirez de ce JavaScript de la série. Tous les autres projets sont également disponibles ici sur Skillshare. Il serait vraiment avantageux de prendre ces cours dans l'ordre. J' espère que vous êtes maintenant excité de construire ces effets photo et je vous verrai à l'intérieur de la classe. 2. Partagez votre travail sur Skillshare !: Lorsque vous suivez un cours, il est très important de ne pas prendre l'habitude suivre juste pour de le suivre juste pour terminer un cours. Prenez le temps de lire chaque leçon, revoir le code que vous écrivez et de réfléchir à la manière dont vous pourriez aborder ces solutions vous-même. Dans cet esprit, ce cours est basé sur des projets, ce qui vous donne l'opportunité de vraiment créer quelque chose de personnel et d'unique. Vous n'avez pas besoin de trop vous perdre et de vous éloigner de la classe, et vous pouvez même prendre du recul une fois que vous avez terminé le cours et revenir et apporter des modifications au projet par la suite. Cela vous donnera vraiment une bonne chance de mettre en pratique ce que vous avez appris en classe. N'oubliez pas non plus de partager votre projet ici sur Skillshare, et je suis le seul à y jeter un coup d'œil, mais il inspirera également les autres étudiants. Pour plus d'informations sur le projet de classe, rendez-vous dans l'onglet Projet et ressources, où vous pouvez non seulement télécharger votre projet, mais également consulter d'autres projets de classe. Dans cet esprit, j'ai hâte de voir ce que vous créerez et téléchargerez ici sur Skillshare. 3. Créer l'interface utilisateur: Bienvenue dans notre prochain projet, qui est l'application d'effets photo. L' interface utilisateur va être relativement simple, surtout par rapport à d'autres projets. Tout ce que nous allons faire est de créer une barre latérale sur le côté droit. Cela va avoir une série de boutons qui vont créer un effet sur une photo qui est en cours de téléchargement. Nous pouvons aller de l'avant et sélectionner le fichier, choisir une image, puis cela affichera cela dans le navigateur. Ensuite, ayez une série d'effets. Nous pouvons en faire un effet en niveaux de gris. Nous pouvons effacer ces effets. Nous avons inversé, nous avons l'effet sépia, puis nous avons une série de boutons, qui va basculer autour de nos valeurs rouges, vertes et bleues. Cela va nous donner des effets différents comme celui-ci. Cela va nous donner une nuance plus rouge. Un effet que cela a va être assez différent sur chaque image. Pour ce faire, nous allons échanger tous les pixels l'image pour nous donner ces beaux effets. Nous avons également la possibilité de télécharger cette image. Nous pouvons cliquer sur ce bouton. Cela téléchargera ensuite l'image que nous utiliserons. Comme pour n'importe quel projet sur ce cours, vous pouvez utiliser une image de votre choix. Ou si vous voulez utiliser la même image que j'ai utilisée pour ce projet, dirigez-vous vers le dépôt GitHub, puis vous pouvez aller dans l'application Photo Effects, où vous verrez non seulement l'exemple de code une fois que c'est téléchargé, mais aussi l'image que j'utilise pendant ce cours. Pour commencer, je vais télécharger ceci. Cliquez sur le nom de l'image, cliquez sur « Télécharger ». Nous pouvons ensuite cliquer avec le bouton droit de la souris, « Enregistrer » notre image. Je vais enregistrer ça sur le bureau. Nous avons également besoin d'un dossier de projet. Retournons à notre bureau, New Folder, qui va être les effets photo. Faites glisser cela dans notre code Visual Studio, puis assurez-vous que notre image est disponible dans notre dossier de projet. Glissons ceci et déposerons ceci dans notre dossier de projet. La première étape sera de créer un nouveau fichier, qui est pour notre page d'index. Ce sera le index.html. Nous pouvons alors ouvrir cela dans le navigateur, copier le chemin vers cela, coller cela dans, et nous sommes prêts à aller. Commençons par notre structure HTML. Comme toujours, je vais utiliser la commande html:5, qui est intégrée dans Visual Studio Code. Le titre du document est l'application Effets photo. Ensuite, à l'intérieur du corps, nous allons entourer toute la zone photo à l'intérieur de l'élément principal. Nous aurons alors la section de côté, qui sera notre barre latérale. Ceci est pour tous nos boutons et le téléchargement de l'image. La section principale va être assez simple. C' est simplement la zone qui va afficher notre image à l'intérieur du navigateur. La façon dont nous allons le faire est de créer un élément de canevas. Une toile est un élément HTML que nous allons utiliser pour dessiner nos images. Il peut être utilisé pour dessiner presque n'importe quel type de graphiques à partir de lignes et de formes, photos, fruits mûrs, objets complexes, 3D, bien que dans ce cours nous n'accéderons qu'aux fonctionnalités 2D, plus spécifiquement le contexte 2D et nous va jeter un oeil à cela plus en détail dans le JavaScript. Nous devons créer un élément de canevas, puis un ID qui va être canevas aussi. C' est juste pour que nous puissions sélectionner cet élément dans notre JavaScript, puis nous pouvons dessiner nos images. Ensuite, la section de côté, qui va contenir notre uploader et nos boutons. La première section va être un div avec la classe d'input-wrapper. Ce sera la section qui va avoir notre étiquette et aussi le fichier uploader. L' étiquette de cette entrée aura un ID de uploader, puis le texte du fichier select. Après cela, une entrée, et le type d'entrée pour cela va être un fichier avec l'ID de uploader. Nous pouvons ensuite utiliser ceci à l'intérieur de notre JavaScript et cela correspond également à notre étiquette juste au-dessus. Ensuite, après notre wrapper d'entrée, nous pouvons créer un deuxième div. Cette div va avoir la classe des effets. Ce sera la zone où nous sélectionnons tous les effets à l'aide de ces boutons. Le premier bouton, cela va déclencher l'effet de niveaux de gris. Le deuxième bouton, c'est pour l'effet sépia. Le troisième sera pour inverser. Le quatrième, c'est le début des quatre boutons, que nous allons basculer autour de nos valeurs rouges, vertes et bleues. Le premier va convertir le rouge, le vert et le bleu en rouge, bleu et vert. Dupliquons ceci pour créer quatre boutons. Nous allons toujours commencer avec la couleur RVB. Le côté gauche sera toujours le même. Cependant, pour le deuxième bouton, il va être commuté en bleu, vert et rouge. Le prochain sera vert, bleu puis rouge. La quatrième combinaison que nous allons utiliser est le vert, le rouge, puis le bleu. Si cette combinaison de couleurs que je change n'a pas de sens pour le moment, c'est bon. Tout cela deviendra plus clair lorsque nous jetons un coup d'oeil aux pixels dans la section JavaScript. Après notre section effets, nous allons créer un nouveau div. Cette div va avoir la classe de contrôles et cela va avoir nos boutons clairs et aussi nos boutons de téléchargement. Le premier de clair et le second est de sorte que notre utilisateur peut télécharger cette image. Donnez ceci une sauvegarde ou nous pourrions même l'ouvrir avec notre serveur en direct si vous avez choisi de l'utiliser pendant ce projet. Ouvrons ça. Allez dans View and the Command Palette, où nous pouvons jeter un coup d'oeil pour notre serveur en direct et nous pouvons ouvrir cela avec notre extension de serveur en direct. Maintenant, à l'intérieur du navigateur, nous avons une application assez terrible à la recherche, mais tout le contenu est en place. Mettons-le dans la prochaine vidéo. 4. Styliser avec CSS: C' est bien pour ce projet va être assez simple. Nous allons simplement créer une couleur d'arrière-plan, puis ajouter des couleurs à nos boutons avec une mise en page réactive. Puisque le style est assez simple, je vais juste commencer cela en haut de notre page d'index. Juste à l'intérieur de la section de tête, nous pouvons créer la section de style, et si vous voulez garder cela séparé et place dans une feuille de style séparée. Le html va être utilisé pour définir la taille de police de base de 10 pixels. La section du corps, tout ce que nous allons faire ici est de définir une couleur d'arrière-plan, puis nous allons créer notre mise en page responsive. On va utiliser la flexbox. Ensuite, sur les plus petits écrans, nous définirons notre barre latérale et notre section principale pour être le type d'affichage de la colonne. Ensuite, nous allons changer cela sur les plus grands écrans pour être le type de ligne. Tout d'abord, la couleur de fond, que je vais utiliser comme valeur rgb. La couleur rouge sera 48 et 47 pour la valeur verte, et la même pour le bleu. Le type d'affichage va être la flexbox et nous pouvons changer la direction de flexion pour être colonne. Nous ne voyons pas beaucoup de différence à l'ampoule minute. Nous allons séparer ces deux sections en rendant la section principale trois fois plus large que la barre latérale. Rendons ça un peu plus large. Peut à nouveau profiter de la flexbox et définir la section principale pour avoir une valeur flex de trois. Pour faire ce travail, nous devons également définir la section latérale. Cela va avoir une valeur flexible de 1. Pour le rechargement, nous ne voyons aucun effet sur la page. Cela se produit parce que nous avons la direction de flexion définie sur colonne. Pour que cela fonctionne plus sur les écrans plus grands, nous devons ajouter une requête média pour changer la direction de flexion pour être de retour à la ligne. Ajoutons @media. Où nous pouvons définir notre largeur minimale pour être une valeur de notre choix. Je vais aller pour une valeur qui va être de 1 000 pixels. La seule chose que nous devons faire à l'intérieur ici est de cibler notre section de corps, puis changer la direction de flex pour être rangée ou vers le navigateur. Maintenant, si cela est un peu plus grand, nous voyons la valeur flex de trois. Pour notre section principale, seule la barre latérale a une valeur flexible de 1, ce qui signifie qu'elle représente un tiers de la taille. En réduisant ce nombre à 1 000 pixels ou moins, nos directions flexibles seront de retour à la colonne pour notre plus petit écran. Pour la barre latérale sur la vue plus large, nous allons également ajouter juste une petite marge sur le côté gauche pour nous donner un peu d'espace à partir de notre image. La section des côtés, nous pouvons définir la marge sur la gauche de 0.5rems. Ensuite, on va travailler avec ces boutons. Les boutons sont pour tous nos effets et aussi les boutons clair et de téléchargement. L' arrière-plan va être une valeur RVB de 21, 20 et 20. Faisons ça un peu plus grand avec un peu de rembourrage. Donc, 1.6rems en haut, zéro à droite gardera cela cohérent avec le haut et à 1.6rems en bas, puis ajouter 2rems sur le côté gauche, ce qui va nous donner un peu d'espacement à partir de la gauche du bas. La taille de la police de 1.6rems, qui est de 16 pixels. Le curseur sera défini pour être un pointeur, lorsque l'utilisateur survolera l'un de ces boutons. La couleur pour que nous puissions voir le texte. Cela va être une valeur RVB. Le rouge est 212, 210 pour le vert et la valeur bleue 210. Compte tenu de notre texte un des couleurs plus claires, il se distingue plus. Nous pouvons également supprimer cette bordure par défaut en définissant cette valeur sur une valeur de none. Ensuite, nous pouvons utiliser notre propre bordure tout en bas pour nous donner une ligne blanche entre chacun de ces boutons. Cette ligne blanche va être d'un pixel de large et d'une couleur unie. Ensuite, nous allons ajouter un effet de survol à nos boutons. Nous le faisons avec l'état de vol stationnaire. Tout ce qu'il faut faire ici, c'est donner à sa couleur de fond un léger changement. La valeur que je vais aller est une valeur rgb de 50, 47 et 47. Essayons ça. C' est tout bon. Maintenant, nous allons mettre tous ces boutons sur leurs propres lignes. C' est relativement simple tout ce que nous devons faire est de cibler notre classe d'effets, qui est le wrapper div pour tous ces boutons dans notre HTML. Ciblons nos effets. Nous devons définir le type d'affichage pour être flex. Ensuite, pour rendre ces verticales, nous pouvons définir la direction de flexion pour être colonne. Jusqu' à nos contrôles, qui sont le bouton Effacer et le bouton Télécharger. Nous allons nous assurer que chacun de ces boutons occupe la moitié de la largeur de l'espace disponible. Encore une fois, nous allons utiliser le type d'affichage de flex, puis nous pouvons cibler chacun de nos boutons, qui sont imbriqués à l'intérieur de cette section de contrôle. Si nous définissons le flex pour être une valeur de un, cela va s'assurer que chacun de nos boutons à l'intérieur de la section va prendre des quantités égales d'espace ouvertes. Nous avons encore une planche sur le fond de sorte que nous pouvons supprimer cela avec border-bottom none. Si nous faisons défiler vers le haut, la prochaine chose que nous allons faire est de déplacer tous les textes, ces boutons pour être sur la gauche. Nous pouvons le faire en définissant l'alignement du texte à gauche. Ensuite, pour nos deux boutons en bas, nous pouvons rétablir cela en définissant ceci pour être un text-align et être au centre. Nous pouvons également supprimer les valeurs de remplissage pour ce bouton Effacer et Télécharger. Le rembourrage. Allons pour 1.6rems en haut et en bas et zéro à gauche et à droite, qui va ensuite tirer notre texte au centre de nos boutons. Retour vers le haut, nous avons cette section qui a une étiquette et aussi une entrée. Commençons par notre label. Définissez la taille de la police pour qu'elle soit un peu plus grande. Donc 1.8rems. Si nous étirons également le navigateur pour être une taille plus large. Lorsque ces deux éléments sont à côté l'un de l'autre. Nous avons également besoin d'un rembourrage à droite de cette étiquette. Je veux ajouter 1.6rems. Cette étiquette et aussi l'entrée étaient entourées d'un div appelé wrapper d'entrée. Maintenant, nous allons l'utiliser et ajouter un peu de rembourrage et aussi une couleur d'arrière-plan. C' était la classe, donc nous utilisons le point. L' arrière-plan veut donner à cela une simple couleur de gris et aussi une valeur de remplissage de 1.6rems. Ensuite, pour terminer cette section CSS, nous allons sélectionner notre section de canevas, qui est sur le côté gauche dans la section principale, puis définir cette section sur 100 % de l'espace disponible. C' est tout ce qu'on va faire. Nous pouvons aller de l'avant et apporter d'autres changements. Ce que quelqu'un garde le style de ce projet assez simple, puis dans la vidéo suivante, je vais passer à dessiner sur le Canvas. 5. Dessiner sur la toile: Pour que ce projet prenne vie, il faut ajouter un script et découvrir comment dessiner sur la toile. Au bas de notre index ou html, juste au-dessus de la clause et du corps, ajoutons notre script avec la source de script.js. Au-dessus de la barre latérale, nous pouvons maintenant créer ce script.js. Maintenant, nous avons un élément de canevas à l'intérieur de notre html, et cela a aussi l'ID de canevas. Mais comment faire pour dessiner sur cette toile ? Eh bien, la première chose que nous voulons faire est de créer une constante appelée toile. À l'intérieur, nous allons sélectionner ce canevas par l'ID, donc getElementByID et l'ID était canevas. Cela nous donne maintenant notre référence à notre élément html. Nous devons ensuite accéder à ce qu'on appelle le contexte de rendu. Cela nous permettra d'accéder à une gamme de fonctions de dessin, afin que nous puissions manipuler ce qui se trouve sur la toile. La façon dont nous pouvons le faire est d'accéder à nos éléments de toile, que nous avons restaurés ci-dessus. Nous pouvons accéder au contexte en utilisant une méthode appelée getContext. Nous allons seulement accéder aux fonctionnalités 2D, donc nous passons en 2D. Ensuite, nous allons stocker ceci dans une constante appelée ctx. Les références ctx sont utilisées chaque fois que nous voulons dessiner sur le canevas. Par exemple, ce contexte a une méthode fillText pour dessiner un texte sur notre canevas. Accédez à notre contexte, et ensuite nous pouvons utiliser l'une de ces fonctions de dessin que nous avons mentionnées, qui s'appellera fillText. A l'intérieur ici comme une chaîne, nous allons passer un texte que nous voulons afficher sur la toile. Ajoutez quoi que ce soit à l'intérieur. Nous pouvons ensuite ajouter deux valeurs supplémentaires, qui est la largeur et aussi la hauteur. Allons pour 100 pixels et 50 pixels. Ensuite, voyons cela dans le navigateur. Enlève ça. La couleur plus foncée du texte ne se distingue pas trop, mais c'est maintenant notre texte sur le canevas. Nous pouvons également créer des formes comme un rectangle, et nous pouvons aussi utiliser le trait, qui est le contour du rectangle ou de la forme, ou nous pouvons utiliser un remplissage qui va créer une forme remplie. Jetons un coup d'oeil à la façon dont nous pouvons créer un rectangle dans la toile. Nous avons, encore une fois, accès au contexte. Nous pouvons ensuite remplir un rectangle avec fillRect. Nous allons ensuite passer dans toutes les valeurs différentes. Les deux premières coordonnées x et y faciles de la toile où nous aimerions commencer ce rectangle. Si nous avons entré une valeur x est zéro et que la valeur y est zéro, cela remplace notre rectangle dans le coin supérieur gauche du canevas. Une troisième et quatrième valeurs vont être la taille du rectangle. Si vous voulez que ce soit 50 par 100, c'est maintenant 50 pixels de large et 100 de haut. Si nous ne voulions pas cette couleur unie et que nous voulions juste un contour, nous pourrions changer cela pour le StrokeRect. Ce trait et ce remplissage peuvent également s'appliquer lorsque nous créons des formes différentes. Plutôt que de spécifier une taille fixe comme celle-ci, nous pouvons également accéder à notre objet canvas et le transmettre en tant que variable. Nous pouvons définir la largeur de la toile et aussi la toile, la hauteur. Cela va maintenant nous donner un rectangle qui est la hauteur et la largeur de la toile. Nous pouvons également utiliser différents objets de couleur. La façon dont nous pouvons changer la couleur est en accédant au contexte, puis en utilisant le FillStyle. Je veux définir ce prochain rectangles soit égal à la valeur x de 42e9f5. Déplaçons maintenant cela au-dessus de notre rectangle. Nous pouvons changer cela pour être un rectangle rempli et aussi le rendre un peu plus petit. Changons ça pour être 50 par 50 pour nous donner un carré. Un autre exemple de ce que nous pouvons faire avec la toile est de dessiner quelques lignes pour créer des formes plus complexes. Par exemple, si nous voulions créer quelque chose comme un triangle, nous pouvons alors créer une série de lignes pour créer la forme. Nous allons commencer notre forme avec CTX.BeginPath. BeginPath démarrera ou réinitialisera tous les chemins existants que nous avons créés ci-dessus. Après cela, nous allons déclarer exactement où sur la toile, nous voulons commencer notre jointure. Par exemple, si nous voulions commencer cela au centre même de la toile, nous ferons ctx.moveto. MoveTo va déplacer nos points de référence à n'importe quel endroit du canevas sans tracer de lignes. La façon dont nous pouvons placer cela dans le centre est en définissant le canvas.width, puis divisez-le par 2 pour le placer au centre. Ensuite, nous pouvons faire la même chose pour la toile.height en divisant ceci par 2. ce moment, nous devrions être dans une position où nous sommes prêts à tracer des lignes droites depuis le centre de notre toile. Nous accédons à notre contexte, puis lineTo. Si vous vouliez tracer une ligne dans le coin supérieur droit, les coordonnées dont nous avons besoin pour le moment sont 300 et zéro. Donc 300 pour la valeur x et zéro pour la valeur y. Pourquoi avons-nous besoin de ces deux valeurs exactes ? Eh bien, c'est parce que par défaut, la toile mesure 300 pixels de large sur 150 pixels de haut. Si cette position en haut à gauche est zéro, zéro, la première valeur de 300, nous allons placer cela à droite à la toute fin. Nous utilisons ensuite la valeur zéro pour rester au sommet de la toile. Si nous avons ajouté d'autres valeurs à l'intérieur d'ici, cela poussera alors cela plus loin vers le bas. Nous avons créé notre première ligne avec la série sur la toile. Nous devons également utiliser ctx.stroke. Ensuite, tout ce que nous avons à faire à partir d'ici, c'est de créer une série de lignes. La suivante, si nous voulons faire cela de haut à droite en bas à droite, nous commençons par garder la valeur x comme 300, ce qui est juste à la toute fin. Comme nous l'avons décrit, la hauteur de la toile par défaut va être de 150, mais cela nous laisse une ligne de haut à droite vers le bas à droite. Si nous voulions réordonner cela au centre, nous avons alors deux options. Nous pourrions aller de l'avant et créer une nouvelle ligne comme nous l'avons fait avec ces deux lignes de code, ou à la place, nous pouvons revenir au début, qui est le centre de la toile en utilisant CTX.ClosePath. Je vais maintenant avoir un triangle. Si nous voulions remplir cela avec une couleur unie, nous pourrions remplacer le trait par remplissage. C' est maintenant une introduction de base à joindre sur le canevas. C' est génial, mais nous n'avons pas besoin de tout ça pour notre projet. Au lieu de cela, nous devons dessiner une image sur cette toile. Au lieu de cela, nous allons supprimer cette section, et nous pouvons créer de nouveaux éléments d'image. Nous pouvons créer de nouveaux éléments d'image avec une nouvelle image. Ce nouveau constructeur d'image va créer de nouveaux éléments d'image comme nous l'avons fait lorsque nous utilisons documents.CreateElements. Jetez ceci dans une constante appelée img. Ensuite, nous devons définir une source d'image. Nous devons saisir notre image et définir l' attribut source pour être égal à notre image, qui est bridge.jpg. N' oubliez pas de changer cette source d'image si vous avez utilisé une autre image. Nous avons maintenant un nouvel élément d'image et nous avons défini la source. Maintenant, nous devons positionner cela sur la toile. Mais juste avant de le faire, nous devons vraiment nous assurer que cette image a été créée avant d'essayer de dessiner cela sur la toile. La façon dont nous pouvons le faire est d'utiliser onload, qui va exécuter une fonction une fois que notre image a été créée. A l'intérieur de cette fonction, nous allons dessiner notre nouvelle image sur la toile. Comme toujours, nous sélectionnons notre contexte, puis nous avons accès à DrawImage. La première chose que nous devons ajouter est l'image, que vous voulez dessiner, et c'est notre variable d'image. Ensuite, nous définissons la position sur la toile où nous voulons que cette image soit affichée. Si nous définissons ceci sur zéro et zéro, cela sera affiché à partir du coin supérieur gauche. Nous voyons maintenant une image à l'écran, mais l'image est beaucoup trop grande pour la toile. Une autre chose que nous pouvons faire est d'ajouter deux valeurs supplémentaires, et ceci est de définir la largeur et la hauteur de l'image. Si nous définissons cette valeur à 300 avec la hauteur et à 150 pour la largeur, cela va maintenant vous assurer que notre image est maintenant de la même taille que la toile. Même si nous voyons maintenant cette image à l'écran, elle n'a pas l'air de trop haute qualité. Maintenant, c'est parce que l'image a maintenant été étirée pour avoir la même taille qu'une toile. Cependant, nous pouvons le changer et nous assurer que le canevas est ensuite étendu pour avoir la même taille que l'image. Faisons cela juste au-dessus où nous dessinons notre image. Nous pouvons définir la largeur de notre toile avec canvas.width pour être égale à la largeur de notre image. Juste en dessous, exactement la même pour notre hauteur, nous définissons la hauteur de la toile pour être égale à notre hauteur d'image. Nous pouvons déplacer les deux dernières valeurs où nous définissons notre taille d'image à l'intérieur du DrawImage. Cela va maintenant nous donner une image claire puisque la toile est maintenant étirée pour avoir la même taille que l'image. Ceci est un aperçu de base de certaines des choses que nous pouvons traiter avec la toile. Mais nous allons seulement utiliser ceci pour ajouter des images et manipuler les pixels. Ensuite, nous voulons utiliser notre fichier uploader, que nous avons ajouté en haut de cette barre latérale. Cela va permettre à l'utilisateur de sélectionner une image de son ordinateur plutôt que d'utiliser cette valeur codée en dur juste ici. 6. Télécharger des images: affichage d'une image à l'écran ou sur la toile est maintenant un grand pas vers le fonctionnement de notre application. Mais la prochaine chose que nous voulons faire est de permettre à l'utilisateur de cliquer sur le fichier uploader, sélectionner une image de son choix, puis de l'afficher sur le canevas. Pour le moment, nous sommes juste en train de coder une source d'image avec l'image qui se trouve à l'intérieur de notre dossier de projet. C' est ce que nous allons faire maintenant dans cette vidéo. Nous allons commencer par créer un nouvel objet FileReader, puis nous pouvons stocker cela à l'intérieur d'une constante appelée lecteur. Ce FileReader va nous permettre de lire le contenu des fichiers, ou dans notre cas, l'image qui est stockée sur l'ordinateur de l'utilisateur. Cela va nous permettre d'utiliser le fichier uploader, et c'est l'entrée que nous avons ajoutée dans le HTML. Nous pouvons ensuite sélectionner une image, puis la définir comme source d'image. La première étape pour que cela se produise est d'aller avec notre index et ici si nous regardons notre uploader, cela a l'ID du uploader. Nous allons utiliser getElementById pour sélectionner cette entrée, puis déclencher une fonction lorsque cela est modifié. Retour à nos scripts en bas, nous pouvons créer une référence à cette entrée appelée ImageLoader, saisir l'ID avec getElementByID, et l'ID a été uploader. Nous pouvons ensuite sélectionner notre constante d'ImageLoader et ajouter un EventListener. L' événement que nous voulons écouter est l'événement de changement, et cela se produira lorsqu'un nouveau fichier a été téléchargé. Lorsque cela se produit, nous allons créer une fonction appelée UploadImage. Ensuite, créons cette fonction juste au-dessus, qui était UploadImage. Ce UploadImage va également passer les informations d'événement puisque nous utilisons une entrée. Pour commencer dans cette fonction, nous allons faire un journal de console et simplement sortir la valeur de notre lecteur de fichiers. Sortons notre lecteur, tous dans le navigateur, cliquez avec le bouton droit de la souris et inspecter, et nous pouvons voir quelles données sont transmises dans la console. Choisissez notre fichier, sélectionnez une image, puis ici nous pouvons voir la sortie de notre lecteur de fichiers. Actuellement, toutes nos valeurs, y compris le résultat, sont définies sur une valeur nulle. En effet, bien que nous ayons une configuration d'objet lecteur de fichiers, nous ne l'avons pas encore transmis nos données d'image. Les données du fichier proviennent de notre téléchargement d'images, qui est stocké dans cette variable e. Maintenant, jetons un oeil à la valeur de e, rechargez le navigateur, et nous pouvons sélectionner une nouvelle image, ouvrir ceci, c'est toutes les informations qui sont transmises à cette fonction sur notre événement de changement. Si nous ouvrons ensuite la cible, qui est notre entrée, cliquez sur la flèche, puis faites défiler vers le bas, nous avons cette valeur appelée fichiers. Voici une liste de tous les fichiers qui ont été téléchargés depuis notre fichier uploader. Bien sûr, nous n'avons autorisé qu'un seul fichier à télécharger. Donc, cela va juste avoir la valeur de zéro. C' est notre nom, qui est bridge.jpg. Nous pouvons maintenant transmettre ces données d'image à notre lecteur de fichiers. Rappelez-vous que nous accédons à l'événement, nous accédons ensuite aux cibles, nous accédons ensuite aux fichiers, et le premier fichier de zéro. Retour à notre fonction, nous pouvons maintenant cibler notre lecteur, puis nous pouvons définir l'URL de ce fichier avec ReadAsDataURL. À l'intérieur de sa méthode, nous passons ensuite à l'emplacement de notre fichier, qui était e.targets.files, et le premier fichier qui est l'index de zéro. Maintenant, faisons un nouveau journal de console avec la valeur de lecteur et voyons ce qui se passe cette fois. Rappelez-vous, la dernière fois qu'on a fait ça, on a eu la valeur nulle. Ouvrez donc la console, sélectionnez le nouveau fichier. Nous avons notre objet FileReader, et maintenant à l'intérieur de ce résultat en bas, nous avons maintenant quelques données de fichier plutôt que la valeur de null. Ce FileReader a maintenant toutes les données dont nous avons besoin. Maintenant, tout ce que nous avons à faire est d'accéder à notre lecteur, et puis comme nous l'avons fait ci-dessus avec notre image, nous allons également déclencher une fonction une fois que le chargement est terminé. Cela nous laisse maintenant dans la même position que nous avions juste au-dessus, où nous avons notre source d'image, et ensuite nous devons le charger sur la toile. Pour ce faire, nous pouvons déplacer la section juste ici, coller ceci à l'intérieur de notre fonction onload, et maintenant au lieu de sa valeur codée en dur de bridge.jpg, nous allons maintenant définir la source de l'image pour être égale au lecteur et aussi accéder à la valeur de résultat que nous venons de voir dans la console. Maintenant, tout ce qu'il reste à faire est de sauvegarder cela et de tester cela dans le navigateur. Donc, nous choisissons un fichier, saisissons n'importe quelle image, et ce fichier est maintenant affiché à l'intérieur de la toile. Espérons que tout cela fonctionne maintenant pour vous aussi. Cela se passe un peu ici, alors faisons un bref résumé. Si on retourne à notre script. abord, nous avons saisi notre entrée de fichier et stocké cela à l'intérieur d'une constante appelée ImageLoader. Ajoutez tout ce chemin et écoutez les modifications qui se sont produites une fois qu'un nouveau fichier a été téléchargé. Cela va alors déclencher notre fonction UploadImage, que nous avons définie juste ici. Nous avons créé une variable de lecteur qui est égale à un nouvel objet FileReader. Ce lecteur de fichiers nous permet de lire le contenu de n'importe quel fichier téléchargé, ce qui est des images dans notre cas. Une fois que cette fonction UploadImage est exécutée, elle obtient ensuite passer les informations d'événement, qui contient l'image que l'utilisateur a téléchargée. Ces informations de fichier sont ensuite transmises à notre FileReader, et nous le faisons avec une méthode appelée ReadAsDataURL. Enfin, lorsque tout cela est terminé et complètement chargé, nous allons ensuite définir la source de l'image, puis l'afficher sur la toile avec nos images. Maintenant, le téléchargement. Ensuite, nous allons apprendre comment accéder à tous les pixels qui composent ces images. Une fois que nous comprenons comment tous les pixels composent une image, nous pouvons alors jouer avec eux pour créer nos effets. 7. Comprendre les données de pixels: Pour comprendre comment manipuler nos images et aussi comment ajouter des effets, nous devons d' abord comprendre comment les pixels composent nos images. Pour obtenir les données de pixel de notre toile, nous avons une méthode disponible appelée GetImageData. Jetons un coup d'oeil à la façon dont nous pouvons utiliser cela à l'intérieur de notre script. Installez ceci à l'intérieur d'une constante appelée ImageData. Je vais définir cela égal à ctx, puis appeler la méthode que nous venons de mentionner, qui était GetImageData. GetImageData va nous permettre de saisir tous les pixels que vous avez stockés sur la toile. Parce que nous voulons saisir toutes les valeurs de pixel de la pleine taille du canevas, les deux premières valeurs que nous allons ajouter sont la position de départ en haut à gauche, qui est 0, 0. Les deux valeurs suivantes, nous voulons saisir toute la largeur de la toile, et aussi la pleine hauteur. Nous pouvons le faire avec canvas.width et aussi en sélectionnant la canvas.height. Cela va récupérer toutes les données de l'image en haut à gauche à travers la page en bas à droite. Juste comme note de côté, nous pouvons sélectionner une partie plus petite de la toile si nous voulions seulement les données d'image pour une partie particulière. Nous voulons cependant la pleine taille de la toile, puisque l'image va être la pleine taille de la toile. Faisons un journal de console et voyons ce qui se passe dans le navigateur. Enregistrez nos ImageData, cliquez avec le bouton droit de la souris et inspectez. Regardez sur l'onglet de la console. Nous avons maintenant ces données d'image. Rappelez-vous dès le début que nous avons mentionné que la largeur et la hauteur par défaut de la toile sont de 150 par 300. Nous avons également ces données et si nous cliquons sur la flèche déroulante, nous voyons que nous avons 180 000 valeurs différentes. Toutes nos données sont stockées dans une structure de type tableau. Avoir 180 000 valeurs, qui composent toutes nos données de canevas. Si nous cliquons sur la liste déroulante pour développer l'une de ces sections, nous voyons que toutes les valeurs sont définies à zéro. C' est parce que nous n'avons actuellement rien stocké sur la toile. Maintenant, si nous voulons voir cela plus en détail avec une image, nous pouvons saisir ces deux lignes de code et placer cela à l'intérieur de notre propre fonction de chargement. Cela signifie que cette section ne s'exécutera qu'une fois qu'une image aura été téléchargée. Choisissez le fichier, sélectionnez l'image. Nos données d'image sont à nouveau retournées. Cette fois, nous voyons une hauteur différente et une largeur différente puisque nous définissons la taille globale de la toile pour être égale à notre image. Nous voyons aussi maintenant que nous avons une plus grande toile. Nous disposons maintenant de 4,3 millions de données. Cette partie suivante est vraiment importante à comprendre. Tout d'abord, si nous saisissons notre hauteur et notre largeur, nous pouvons multiplier ces deux valeurs ensemble, donc 853, puis le multiplier par 1280, ce qui nous donne une valeur de 1,09 million. Il s'agit peut-être du nombre de pixels ou du nombre de données que vous attendez à être retournées si vous multipliez la largeur et la hauteur. Cependant, nous avons une valeur qui est quatre fois plus élevée. Si nous multiplions 1091840 par la valeur de quatre, nous voyons alors 4,3 millions, comme dans nos données. Cela conduit maintenant à la question de savoir pourquoi obtenons-nous exactement quatre fois les valeurs en arrière n'importe quel nombre de pixels ? Eh bien, c'est parce que chaque pixel sur notre toile est composé de quatre canaux. Nous avons un rouge, vert et bleu, ainsi qu'une valeur alpha. Les valeurs rouge, vert et bleu constituent la couleur de chaque pixel. Donc, le tout premier pixel en haut à gauche serait notre premier élément de données. Si nous entrons ici, notre tout premier pixel en haut à gauche est ces quatre premières valeurs juste ici. Ce pixel particulier est composé d'une valeur rouge de 49, valeur verte de 39 et d'une valeur bleue de 92. La quatrième valeur de 255 est la valeur alpha, et il s'agit de l'opacité. Si c'était une valeur de zéro, ce sera entièrement transparent. Mais 255 est la valeur la plus élevée, ce qui signifie qu'il n'y a pas de transparence définie sur ce pixel particulier. De même, si nous passons au lot suivant de quatre pixels, vous voyez les valeurs rouge, vert et bleu ainsi que la valeur alpha finale. Notre premier pixel et notre deuxième pixel sont les mêmes couleurs. Si nous passons au troisième lot, donc 8, 9, 10, 11, nous voyons que parce que cela se mélange à une couleur différente, la valeur rouge est passée de 49 à 50, la valeur verte est passée de 39 à 40, et aussi la valeur bleue a également augmenté. Juste pour récapituler, nous avons les données d'image qui ont été retournées à partir de la toile. Nous avons la hauteur et la largeur de la toile et si nous multiplions ces deux valeurs, cela nous donne le nombre total de pixels sur la toile. Chaque pixel possède les quatre valeurs suivantes : rouge, vert, bleu et alpha. C' est pourquoi les données que nous recevons sont exactement quatre fois plus élevées que les pixels. Maintenant, avec cette connaissance de la façon dont les pixels sont constitués à l'aide des quatre canaux, nous allons maintenant utiliser ce que nous avons appris dans la prochaine vidéo, faisant une boucle à travers ces pixels et en les transformant en valeurs différentes. 8. Bouclage à l'aide des données d'images: Maintenant, nous savons que tout ce qui est sur la toile ou tous nos pixels, maintenant stocké dans cette constante appelée ImageData. Nous pouvons maintenant l'utiliser pour parcourir toutes nos données, qui sont stockées à l'intérieur, puis nous pouvons jouer avec les valeurs de pixel. Pour ce faire, nous allons créer une fonction, où nous pouvons saisir ces données de pixel et avoir un peu de jeu avec chacune des valeurs. Donc, je fonctionne, et je ce qu'il faut appeler ce changement. Nous pouvons également supprimer notre journal de console d'en haut. On peut saisir cette ligne de code juste ici. Mettez ceci et collez ceci à l'intérieur de notre fonction de changement. Toutes nos données de pixel à l'intérieur de cette variable sont stockées dans cette propriété de données. Ainsi, nous pouvons accéder à cela et créer de nouvelles constantes appelées données, et définir cela égal à ImageData.Data, et cela nous donnera accès à toutes les valeurs de pixel à l'intérieur de cette propriété de données. Nous savons donc qu'il y a des centaines, des milliers, voire des millions de données à l'intérieur de cette propriété. Donc, la meilleure chose que nous puissions faire est de parcourir chacun d'entre eux en lots de quatre. Si nous parcourons cela en lots de quatre, nous savons que la première valeur de chaque boucle sera toujours la valeur rouge. La deuxième valeur sera toujours le vert, et la troisième valeur sera toujours la valeur bleue. Donc, pour le faire à l'intérieur de notre fonction de changement, nous allons créer une boucle pour. Une fois la boucle exécutée, nous allons créer une nouvelle variable appelée i, et d'abord définir cette valeur sur 0. Nous voulons que cette boucle pour continue de fonctionner tant qu' il y a des valeurs stockées à l'intérieur de nos données. Donc, nous allons continuer tant que je suis inférieur à data.length. Donc, les données sont toutes nos données d'image et la longueur est le nombre d'éléments, donc notre boucle continuera à fonctionner tant qu'il y a des données de pixels à parcourir. La troisième déclaration que nous allons dire i plus est égale à 4. Donc, sur la toute première boucle, nous allons définir la variable de i pour être égale à 0, puis pour chaque boucle après que nous allons incrémenter cette valeur de quatre. Nous le faisons parce que, comme nous le savons déjà, chaque pixel a quatre valeurs. Donc, augmenter cela de quatre sur chaque boucle sera le début de chaque ensemble de données de pixel. Sur la toute première boucle, nous allons saisir les quatre premières valeurs de pixel. Ce seront ceux-là juste ici. Nous pouvons y accéder avec des données, et tout comme un tableau, nous pouvons accéder au tout premier, qui est la valeur rouge, nous avons fait des données i. Rappelez-vous au tout début, i est égal à 0, donc ce sera exactement le même que les données 0. Si nous dupliquons cela deux fois de plus, nous pouvons obtenir la deuxième valeur avec le numéro d'index d'un. Il s'agit de la valeur verte et de la valeur bleue avec le nombre de deux. Si nous le voulions, nous pourrions également saisir la valeur Alpha ou la valeur de transparence, mais nous n'avons pas besoin de ceci pour cet exemple. Il s'agit du premier lot ou des quatre premières valeurs. Une fois cette boucle exécutée, la valeur de i sera incrémentée de quatre, puis cela passera à l'ensemble suivant de quatre valeurs, laissant i à 4, 5, 6 et 7. Par conséquent, plutôt que d'avoir ces valeurs codées en dur, nous pouvons définir ceci pour être égal à i, qui est le premier de chaque ensemble de quatre, et i plus 1, puis i plus 2. Cette première ligne ici sera toujours égale à une valeur rouge. Cela sera toujours égal à nos valeurs vertes, et cela sera toujours égal à nos valeurs bleues. Donc, si nous voulons jouer avec ces couleurs, une valeur RVB va de zéro à 255. Ainsi, par exemple, nous pourrions définir la valeur rouge pour être égale à 255. Pour voir ces modifications, nous devons maintenant appliquer ces pixels sur le canevas. Pour ce faire, nous pouvons utiliser une méthode appelée PutiMageData. Donc, juste après notre boucle for-, nous pouvons à nouveau accéder à notre contexte, puis à la méthode appelée PutiMageData. Les données que nous voulons remettre sur le canevas sont ces ImageData. Je vais appliquer ceci en haut à gauche à la toile avec la position de 0, 0. Puis enfin, appelons cette fonction de changement, nous devons ajouter un gestionnaire de clic à notre premier bouton. À l'intérieur de notre index, nous commencerons par le bouton en niveaux de gris, qui est le premier bouton de cette section d'effets. Prenons ces documents Word et cette fois, nous allons utiliser QuerySelectorAll. Cela va saisir tous les éléments de notre page, qui a le type de bouton. Parce que nous avons plusieurs boutons, nous devons ensuite sélectionner notre premier bouton avec la position d'index de zéro. En utilisant AddEventListener, nous pouvons alors écouter tous les événements de clic, qui vont ensuite exécuter notre fonction de changement. Essayons cela dans le navigateur. Redémarrez notre serveur en direct, choisissez une nouvelle image. Ensuite, si nous cliquons sur notre premier bouton, qui est l'échelle de gris, nous définissons alors toutes les valeurs rouges à l'intérieur de nos données d'image pour être une forte valeur rouge de 255. Mettons à jour notre boucle pour, et nous allons rétablir nos couleurs rouges pour être exactement comme elles sont dans l'image. Descendez à notre section verte, où nous définirons plutôt le vert à 255. Téléchargez cette image, cliquez sur notre fonction et nous voyons maintenant la couleur verte prendre un effet. Nous pourrions également faire la même chose pour la troisième ou la valeur bleue aussi. C' est tout ce que nous avons à faire pour appliquer des effets à nos images. Maintenant, c'est juste le cas d'ajuster les valeurs de couleur de nos pixels en fonction des effets que nous voulons appliquer, et c'est ce que nous allons faire ensuite lorsque nous appliquerons un effet de niveaux de gris. 9. Fonctions de grise, sépia et inverser les fonctions: Avec les connaissances que nous avons maintenant plus juste dans ces valeurs de pixel, nous pouvons maintenant ajouter quelques effets et les lier à nos boutons. La première chose que nous allons faire est de commencer avec notre bouton de niveaux de gris. Nous pouvons donc changer cet exemple de fonction en niveaux de gris. Avec cela, nous devons également modifier notre écouteur de clic, de changement, cela doit également être notre nom de fonction de niveaux de gris. Pour cet effet de niveaux de gris, nous devons créer une couleur de gris, puis l'ajouter à chacune de nos valeurs rouges, vertes et bleues. À l'intérieur de notre boucle, nous allons créer une constante pour notre valeur grise. Ensuite, nous devons créer notre valeur grise. Nous allons le faire en sélectionnant, tout d'abord, notre couleur rouge, qui est donnée i. Nous allons l'ajouter à notre vert, qui est les données i plus 1. Ensuite, nous ajoutons ceux-ci à notre bleu, qui est les données i plus 2. Tout ce que nous faisons ici est simplement d'ajouter ensemble les trois de nos couleurs pour chaque pixel sur l'écran. Pour réduire cela à une nuance de gris, nous devons également manipuler ces trois valeurs. Donc, la valeur rouge, nous devons multiplier ceci par 0,21, la couleur verte qui est au milieu, multipliez ceci par 0,71 et le bleu est multiplié par 0,07. Maintenant, il n'y a pas de règle difficile et rapide que nous devons utiliser pour cette couleur grise. Il s'agit simplement d'une formule qui se trouve lors de la recherche sur le sujet. Nous pouvons utiliser des valeurs différentes à l'intérieur ici. Maintenant, nous pouvons saisir notre valeur grise et définir ceci comme notre rouge, aussi comme notre vert, et aussi comme nos valeurs bleues. Essayons cela dans le navigateur. Nous pouvons rafraîchir, choisir une nouvelle image. Essayons nos effets de niveaux de gris. Bien, notre échelle de gris fonctionne maintenant et la semaine prochaine nous passerons à l'effet sépia, qui est fondamentalement une version plus chaude d'une image en niveaux de gris. Toutes ces fonctionnalités vont être similaires, donc nous pouvons copier notre fonction de niveaux de gris, et ajouter ceci juste en dessous. Celui-ci s'appelle sépia. Nous saisissons toujours toutes les données d'image, mais cette fois nous devons manipuler cela d'une manière légèrement différente. Nous allons donc utiliser la couleur de gris de base de la fonction niveaux de gris, mais au lieu de cela, nous allons ajouter quelques valeurs rouges et vertes supplémentaires. Donc, pour la valeur rouge, qui est d'abord, nous pouvons ajouter 95, une valeur verte, nous allons ajouter 58, ce qui donnera à notre image un ton légèrement plus chaud. Nous pouvons alors appeler cette fonction par notre deuxième bouton. Copions ceci, QuerySelectorAll et puis nous pouvons sélectionner notre deuxième bouton avec le numéro d'index de 1, la fonction est sépia. Essayons ça. Affichez comme une image et cliquez sur le bouton. Cela nous donne cette version plus chaude de notre image en niveaux de gris. Ensuite, nous avons la fonction inverse, donc nous allons copier la fonction sépia. Ajoutez ceci juste ci-dessous. Celui-ci est notre fonction d'inversion. Sous l'effet inverse est également connu comme une image inversée. Les couleurs sont inversées, par exemple, un noir deviendra blanc et ainsi de suite. Cela nous donnera un effet similaire aux négatifs photo de style ancien, nous avions l'habitude d'obtenir lors du développement de photos. Pour inverser, nous n'avons pas besoin d'utiliser cette section grise, donc nous pouvons supprimer cette ligne ici, à la place, nous devons déduire la valeur de 255 de chacune de nos couleurs. La raison pour laquelle nous faisons cela est qu'une valeur RVB passera de 0 à 255. Si nous déduisons 255, cela nous donnera l'effet inverse. Pour les données i, qui est rouge et déduire les données i. valeur verte, nous faisons exactement la même chose, c'est 255, puis déduire les données i plus 1. Le bleu, c'est 255, puis déduire les données i plus 2. Nous colorions ensuite ceci avec notre bouton et ce bouton est la position 2, et le nom de la fonction est inversé. Essayons celui-là. Voici le dossier. Celui-ci fonctionne maintenant aussi. Maintenant, nous avons nos trois premiers boutons maintenant connectés, nous allons maintenant passer à la vidéo suivante, où nous allons ensuite échanger toutes les valeurs de pixel pour nous donner nos quatre derniers effets. 10. Ajouter des effets supplémentaires: Les fonctions de fichier suivantes que nous allons ajouter, vont juste être un cas de basculement autour de nos valeurs rouges, bleues et vertes. Nous commencerons par changer nos valeurs rouge, vert et bleu pour être le rouge, le bleu et le vert. Prenons notre dernière fonction et nous pouvons dupliquer ceci juste en dessous. Le nom de la fonction va être rbg. Ce que nous voulons faire ici, c'est de changer le rouge, vert et le bleu pour ensuite être rouge, bleu puis vert. Pour celui-ci, le rouge reste le même tout ce que nous devons faire est de définir la première valeur pour être égale au rouge, qui est data [i]. La deuxième valeur qui est juste ici, celle-ci sera égale au bleu. Le bleu est notre troisième valeur de i plus 2, changeons cela. Ensuite, notre troisième valeur sera verte, qui est i plus 1. C' est nos couleurs libres maintenant éteintes. Cependant, bien qu'avec cette fonction, il y ait un petit problème. Nous définissons la valeur rouge pour être égale à la valeur rouge, ce qui est complètement fin. Nous définissons ensuite toute valeur verte pour être égale au bleu, ce qui est très bien aussi. Cependant, bien que nous ayons maintenant réaffecté la valeur de l'écran à une couleur différente. Maintenant, quand nous essayons d'assigner cette couleur verte à la toute fin ici, c'est maintenant en cours de remplacement. Cela signifie que ce n'est pas la couleur verte d'origine pour chaque boucle après notre première. Si nous remplissons l'une de ces valeurs, puis les réutilisons, nous devons alors stocker la couleur d'origine à l'intérieur d'une variable. Nous allons définir une const, et c'est notre valeur verte. Définissez cette valeur égale aux données i plus 1. Ce sera toujours la valeur verte d'origine. Par conséquent, lorsque nous obtenons cela va changer. Mais nous pouvons également accéder à la valeur verte d'origine après avoir changé cela aussi. Pour récapituler, lorsque nous parcourons tous nos pixels, nous remplissons notre valeur verte avec ce bleu. Par conséquent, lorsque nous essayons de l'utiliser vers le bas, une fois de plus, nous n'aurons plus la couleur d'origine. Par conséquent, nous devons stocker cela dans une constante juste au-dessus. Maintenant, nous allons dupliquer notre clic « Écouteur » laissez-nous mettre au numéro 3, n'importe quelle fonction est rbg. Essayons cela, choisissons un nouveau fichier. Notre fonction fonctionne maintenant. Passons maintenant à échanger nos valeurs rouge, vert et bleu avec un bleu, vert et rouge, alors copiez cette fonction. Le second s'appellera bgr. La première couleur que nous remplacons notre rouge par la valeur bleue. Il s'agit de données i plus 2. La deuxième valeur va être verte, et ceci est i plus un. La troisième valeur est notre couleur de rouge, qui est donnée i. Mais, comme ci-dessus, nous remplaçons notre valeur de données i par une couleur différente. Par conséquent, nous pouvons stocker nos données d'origine i à l'intérieur d'une variable appelée rouge et définir ceci comme notre troisième valeur. Liez ceci à notre bouton. Celui-ci est le bouton numéro 4. Le nom de la fonction de bgr. Essayons celui-là. La couleur bgr fonctionne également. Nous en avons deux de plus, le suivant est gbr, alors copiez notre dernière fonction. Nous nommons ceci, le premier que nous devons changer est notre couleur verte. Nous devons mettre i plus 1. La deuxième valeur est bleue, qui est notre i plus 2. Le troisième est notre valeur rouge, qui est les données [i]. Tout comme avec la fonction de perte, nous écrasons les données [i]. Nous pouvons utiliser cette constante rouge et mettre à jour ceci comme notre troisième valeur. Nous pouvons lier cela à notre bouton, qui est le bouton numéro 5, et le nom de la fonction de gbr. Essayons celui-ci, choisissez notre fichier. Celui-ci fonctionne maintenant aussi, ce qui nous amène au tout dernier bouton, qui est de remplacer nos valeurs rouge, vert et bleu par vert, rouge et bleu. Duplicule notre fonction appelée grb. La première valeur est verte, et ceci est actuellement défini, donc c'est très bien. La deuxième valeur de rouge est data [i] et puisque nous mettons à jour ceci pendant la boucle, nous pouvons également utiliser la couleur rouge d'origine, qui est stockée dans cette constante. La dernière valeur reste exactement la même. C' est aussi bleu 2. Il s'agit de données i plus 2. Nous pouvons lier ceci à notre dernier bouton l'intérieur de cette section et ceci est le bouton numéro 6, et le fonctionnement de grb. Vers le navigateur. Cliquez sur ce bouton et notre dernière fonction fonctionne maintenant. C' est maintenant tous nos effets d'image qui fonctionnent maintenant. Pour terminer ce projet dans la prochaine vidéo, nous allons mettre en place notre bouton clair pour supprimer les effets et rétablir l'image originale et aussi configurer cela afin que nous puissions télécharger notre photo depuis le navigateur. 11. Claire et télécharger l'image: La dernière étape de ce projet est d'ajouter la fonctionnalité pour effacer les effets de l'image d'origine, et aussi de configurer ce bouton Télécharger aussi. Nous commencerons par le bouton Effacer qui va supprimer tous les effets appliqués et rétablir l'image d'origine. Appliquer ceci est assez simple. Tout ce que nous allons faire est d'écrire une fonction qui sera déclenchée lorsque le bouton Effacer est appuyé. Cela accèdera ensuite aux résultats originaux du lecteur de fichier, puis nous pouvons le définir comme source d'image. Revenons à notre script et créons une nouvelle fonction appelée ClearChanges. Tout d'abord, faisons un journal de console pour notre FileReader, puis nous pouvons appeler notre fonction à partir de notre bouton Effacer, qui est le numéro d'index 7. Essayons ça. Plus dans le navigateur, nous pouvons aller dans les outils de développement, dans la console. Si nous cliquons sur Effacer, nous avons maintenant accès à notre FileReader. Tout comme plus tôt avant de définir une image, nous voyons que le résultat est défini sur null. Mais si nous devions télécharger une image, puis cliquer sur Clear, nous obtenons alors un nouveau FileReader résultats avec les résultats de notre image. Nous pouvons maintenant accéder à ce FileReader.Result, puis définir la source de l'image. Supprimons le journal de la console. Nous pouvons alors accéder à notre variable d'image, et définir la source pour être égale au reader.result. Essayons ça. La première chose que nous devons faire est d'appliquer n'importe quel effet tel que l'inversion. Effacez ceci, et nous avons maintenant accès à l'image originale. Enfin, nous avons également le bouton Télécharger, qui va permettre à l'utilisateur de télécharger l'image après avoir placé des effets. Au-dessus de notre script, nous pouvons créer ceci comme une fonction appelée téléchargement. Puis à l'intérieur, nous allons créer une constante pour stocker notre image. Nous recadrons l'image que vous voulez à partir du canevas, puis utilisons une méthode appelée toDataURL. ToDataURL retournera l'URL de notre image de canevas dans un format d'image PNG par défaut. Si nous voulions cela dans un format différent, nous pourrions changer ceci pour être image.jpeg. Si la prise en charge du navigateur le permet, nous pouvons également utiliser WebP2. Je vais juste considérer cela comme le PNG par défaut, et comme mentionné précédemment, ce ToDataURL retournera l'URL de l'image. Comment pouvons-nous réellement télécharger cette image ? Eh bien, nous pouvons télécharger une URL d'image avec un lien. Nous pouvons créer un lien en utilisant l'élément a, et la façon dont nous le faisons est document.CreateElement, qui va créer un lien pour nous, et nous pouvons créer notre lien à l'intérieur ici, qui est un élément. Stockez ceci à l'intérieur d'une constante appelée lien. Tout comme n'importe quel lien HTML régulier, nous pouvons également y accéder, et définir le href. Le href est l'URL vers laquelle nous allons lier, et nous avons déjà notre URL juste au-dessus stockée à l'intérieur de cette variable d'image. Ensuite, nous allons également accéder à notre lien, et ajouter l'attribut de téléchargement, en définissant la valeur égale à image.png. Ces attributs de téléchargement que nous venons d'ajouter à notre lien indiqueront que la cible sera téléchargée lorsque l'utilisateur cliquera sur ce lien. Cela signifie que lorsqu'un utilisateur clique sur ce lien, il téléchargera tout ce qui est défini sur le href, qui est notre image. Ce que nous avons effectivement fait maintenant est créé un faux élément de lien HTML, que nous n'avons pas affiché dans le navigateur. Cela signifie que le lien ne s'affiche pas dans le navigateur, nous ne pouvons pas cliquer dessus de la manière habituelle pour télécharger cette image. Au lieu de cela, nous pouvons simuler un clic de souris sur un élément en utilisant la méthode click. Pour accéder à nos éléments de lien de volonté, appelez la méthode de clic, et associons cette fonction de téléchargement à notre bouton. C' est le bouton numéro 8, qui déclenchera notre méthode de téléchargement et nous pouvons sélectionner l'image pour le tester. Choisissez l'un de ces effets, cliquez sur Télécharger. Il semble y avoir un problème, alors allons dans la console, nous pouvons cliquer avec le bouton droit de la souris et inspecter. Nous verrons Canvas.ToDataURL n'est pas une fonction, alors passons à notre fonction de téléchargement. Je pense que nous avons juste besoin de changements pour être des lettres majuscules pour l'URL. Essayons ça. Choisissez un fichier. Cliquez sur Télécharger, et notre image est maintenant téléchargée. Cela nous laisse maintenant avec un bouton Effacer et Télécharger. Merci d'avoir pris ce projet, et je vous verrai dans le prochain. 12. Suivez-moi sur Skillshare !: Une énorme félicitations de ma part pour avoir atteint la fin de ce cours. J' espère que vous l'avez vraiment apprécié et que vous en avez acquis quelques connaissances. Si vous avez apprécié ce cours, assurez-vous de consulter le reste de mes cours ici sur Skillshare, et suivez-moi pour toute mise à jour et aussi être informé de tout nouveau cours au fur et à mesure qu'ils deviennent disponibles. Merci encore une fois, bonne chance, et j'espère que je vous reverrai dans un futur cours.