Javascript Fun: Build a Photo Editor App! | Chris Dixon | Skillshare

Javascript Fun: Build a Photo Editor App!

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
12 Lessons (1h 5m)
    • 1. Introduction

    • 2. Creating the HTML structure

    • 3. Styling with CSS

    • 4. Drawing to the canvas

    • 5. Uploading and displaying images

    • 6. Understanding pixels

    • 7. Looping through image data

    • 8. Greyscale, sepia and invert effects

    • 9. Adding additional effects

    • 10. Clearing effects

    • 11. Thank you!

    • 12. Follow me on Skillshare!

13 students are watching this class

About This Class

Welcome to the Javascript fun series!

For web design or development, there is 3 must know technologies, HTML, CSS, and Javascript.

The main aim of the Javascript fun series is to take your knowledge of these 3 (only a little is required!), and put them into practice by building a series of educational, yet fun projects show you exactly how they work perfectly together. Working on projects and solving problems is a great way to learn.

The project we will build in this course will be a Javascript Photo Editing App.

All the required tools are free to download, I will be using the following:

Visual Studio Code Text Editor:

Chrome Web Browser:

We begin by creating the user interface with HTML. The we apply styling using CSS.

Then we add Javascript, this is where the real magic happens!

You will learn things such as:

  • Creating HTML interfaces
  • Styling with CSS
  • Incorporating Javascript and linking external files
  • Variables
  • Const and let
  • ES6 Arrow Functions
  • Event handlers
  • Manipulating the DOM
  • Drawing to the canvas
  • Using the canvas 2d context
  • Working with file readers
  • Uploading images
  • How pixels are structured
  • Looping through pixel data
  • Manipulating and replacing pixels on the canvas
  • And much more!

So if you are looking to move on and put your skills into practice using with real projects, take this course now!


1. Introduction: Hey guys. Unwelcome to the General script. One series My name is Chris, and I'm here to show you how to use HTML, CSS and JavaScript and then put them all together to build a fun on exciting projects. The project, which will build in his course, is a photo editing application. This application is a great way to see how we could work. We have no only Java script, but also the HTML canvas on file off loader elements to we begin by creating the user interface using hate schimmel. The UAE is pretty simple, but it will lay the foundation for project by adding the buttons by look loader on also the hate mail compass. After this, we'll move on to add in a style in using CSS. Make our application look a lot nicer. Just like the HTML, the CSS is pretty minimal. Most of the work in this project is with JavaScript. It's up. We'll have a file upload er at the top of the page. Where do you use you? Can select an image they want to use would end, read the contents that is filed, then display it onto the canvas. After that, we used general script to live through all of the pixel data on the compass. This will allow us to create effects to manipulate the pixel data. The answer effects to the image such as grayscale TCP effect on. Also swapping around the red, green and blue values in just a short time is course covers so much. So Charles Working would file readers pixel data, workmen to converse along with plenty off JavaScript fundamentals such as events looping and functions. So thank you for your interest on Let's get Started. 2. Creating the HTML structure: when I'm going to jump straight in to add any hedge terminal for our photo at its application. The hate smell for this project is pretty straightforward. All we need to do is aren't the basic Hegel structure and then also aren't a file input at the top Here. Underneath here we needs are a series of buttons, which you're going to trigger some job script to then add some effects, too. Old photos. The final piece of hate smell is born that we can't see just a moment. And this is actual converse, which is just below on here, and this will be the area where or photos appear on the screen. So, just like any of a project waiting to go ahead now it's a new project folder. I'm going to add mine on the desktop, man Colisee photo editor. I'll be using visual studio cold for all this project, but of course you can use any successor which you prefer. So I want to open in visual studio code drunk over the Project Boulder, and then we can answer the index dot html as a new phone. So I have a commander control and organ click on this little icon just on here with the new final called in Next Stop HTML never go. So I'm going to be using the built in Emmett Shortcut off page memo cold on five. And then, if we're tub, would then have the basic HTML structure which will need This is all just pretty standard. We have the hedge smell, the heads on, also the body sections inside the head. We have the title, and also some meta tags had some information for our site inside the time so we can changes from documents. Two photo editor and then it's openly soap inside the browser, so we'll have some options to open this up. We can even go inside the Project folder on the desktop and double click on the index page or in visual studio cold. You can also go over to the file an angle to copy path and then paste it in as a new tab. There we go. So there's always started project, which we need to add some hate smell, too. I'm going to begin at the very top off the body section and start with the file upload A. This is going to have a Div as a rapper and then an I D or upload. First thing we need is a label on an input. So this label, he's going to have some attributes. So the 1st 1 is going to be for Oh, Clodagh, the text all select file, Okay. And then after he weaken aren't our import. Some of the input is you stay open in psych. The types this time is going to be all oil, since we're going to be uploading a photo to display on the screen when he started I d oh, Clodagh. And this needs to much the for attribute the label. So this label is linked to imported just here. So that's on check. This is working, okay, which is, as a label off select file. And also, I would choose file option. So we take a look at the finish version here. The next thing we need to do now is aren't these buttons for the effects on also the clear button at the end? This is going to be pretty straightforward. Only to do is aren't a div again as a rapper? Well, give us an I d or buttons. This just for the CSS and then we can add little buttons. The 1st 1 would be text off grayscale and then that's copy. This line on paste is in. Next one is going to be for the CPR effect. And then next up, we have the invert so hard invert inside here. Okay, so after this, we also have the buttons which you're going to switch around the red, green and blue values. So the four phone is going to change the reds green and blue value to be red, blue, green. So we need to understand again on this one is going to be red, green and blue. So RGB on this will convert to be g r, which is the blue, green and red next up again have the RGB colors on this one is going to be gpr green, blue and reds. So keep going. Either they're now on the last one off. This group is going to be RGB on. This is going to be turned into green, red on blue and then right at the end Well, aren't a clear button to remove our effects. Just bring this up over to the browser and when I will have all various Putin's. So the final piece for this hey Gemmell is the canvas. The campus is the thing that makes all this work by displaying the images on the screen a name, we can loop through all the different pixel values on the converse and changes using JavaScript so back over to the index or hate Shimo. Great. One more reparative on inside here. We can argue the Converse elements I want to give the commerce and I D supplements are. Get this with John Scripts off canvas. There we go. So if we say this and then reload the browser, we shouldn't see anything on the screen at the moment. This is because we haven't grown to the canvas just yet, so it's basically just empty for now. So the compass is a hate mob Elements, which will be using to draw images to become used to draw almost any type of graphics from lines and shapes. Photos right through to complex three D shapes. Hello in this course will only access the two D features or what's called the two D context . More on this soon women gets the job script section, so this is all hate you. No need for this project. Majority off the work will be using JavaScript. What's in the next video? We'll get to work with Addison styling using CSS. 3. Styling with CSS: just like in the last video when we are Did the hate mail, The styling for this call she's going to be pretty straightforward to We're just going to add some basic styling or file inputs on also for these buttons at the top two because we don't have a lot in place. I'm going to answer this in the index dot html up in the head section. Rather numbness to a separate file. So just after the page title, we can open up the style tanks. Okay, So before we give this first section with the final blow odor an i d off upload, we can not Socrates in the CSS with the huff because it's an i d. On the name of a blowed. The first thing I want to do is align the section in the middle. We have text align center. I found this in the oak load section, a background color, and you can choose any clue what you prefer. But I'm gonna keep it simple and go for, like, blue and then a border radius the outside off 10 pixels give that save reload and there we go. We also need a little bit of margin for these imports just to give it a little bit. Face in top and bottom, so below upload, weaken aren't the inputs, and then that's a margin to the top and bottom. So two M's on the top and bottom zero on the left and right. Let's see what effect this size in the browser. So good blue background color. Both were missing at the border radius. Let's go back up on changes to be border radius. I never go. It's much better now. It gets work on these buttons just below this. So we're going to set this to be the display type off blacks so we can use the flex box. The spaces buttons out evenly across the page, so we give the buttons the idea of buttons just here. So underneath the input, its target. This with the harsh name buttons, said the display type to be flex, which will allow us to work with the flex box with these buttons and also the justifying contents, which we concerts to the volley or space evenly. If we know, say this and then reloads, these buttons now have equals face in across the page all across the main flex access. We also need a little margin on the top and bottom. Start some space in so we cannot margin. Look, It is consistent with the imports by adding it to EMS on the top and bottom on zero on the left and right, a border or one pixel, a solid line and then in the same light blue color to keep the equally consistent. It is the same even then refresh. Good. So this blue border, we also need to aren't the 10 pixels radius I will also handsome part into to give these bones some spacing. So underneath the border, the board radius off 10 pixels and then some part in all 10 pixels to see how this is looking. Okay, so this is the container. Now let's add some style into the individual buttons. We can select the bulletin just with the elements. Name off. Putin. So a backgrounds off like blue a border radius will give his consistent or 10 pixels the with all 10 m and then a 10 pixels put in going to you've got save and then over to the browser he reloads. So the final piece off styling we need to do is to make the compass the full width off the page, so we won't see the effects just yet. But we consider that the canvas element and then aren't The marks would 100%. And of course, we won't see any effect on the page because we're not drawn anything it to the converse just yet. But drawn to the Congress is something which will look at in the next video. 4. Drawing to the canvas: Welcome back. We're not going to get to work with the converse on actually drawn to this Congress to we're going to start by creating an external pile called the script dot Js on this will handle all the JavaScript for this project. First of all, if we go to the index or hate smell and then down at the very bottom of the body section, let's create that was script tags. And then inside here, we're going to aren't the script sauce that said this equal two of the final path, which is just going to be a script, don't you? Yes. Give that say, Even then it will open a sidebar and at the same level of index dot html wouldn't create our script. Don't Js file, which is going to handle all of the actions we need to manipulate the pixels on the screen . So before we can actually draw to the converse, we need to first select the campus elements which we're gonna store inside a constant. So that's self are constants off campus. That said this be documents thought, Get elements by I d. If you go to the index page, we gave the converse an i d off converse so I can select it with his name inside. The brackets weaken aren't converse. Next up would then need to access what is called the rendering context. This allows us to access a range off drawing functions someone can manipulate. World is actually on the campus. You can also start is in a constant which is short for context off CTX and then select over Converse, which is just here. And then dot gets context inside the brackets within access the two d context because we're not working with any of the three D features in this project. Next, the CTX reference, which you just here. What? I'm going to use this each time we want to draw to the canvas. But example, we could use the fill text method to draw text on the e commerce. So access CTX thought bill text, and this method is going to take in the string which you want to display. It's not your say canvas text. American answer where X and Y coordinates where want this text to appear on the compass. So by default, if no signs off Converse is specified, become less will default to 300 pixels wide on 150 pixels tall. So I said this to be 100 and then 50. This will make sure this fits and signed it. The e commerce area. Say this and then reload. It's pretty small Balkan, See, of a kind of this text is now on the screen. Let's drive or more if wants. Draw a rectangle we can access. CTX thought. Stroke wrecked. This will aren't just the outline off the rectangle on the 1st 2 positions. We aren't off. 00 is going to be the starting position off the rectangle. 00 will be in the top left hand corner, and then we sets how wise on how long I want this to be. We consider this to be 100 by 100. Refresh, and there's a rectangle online. Or it wanted this to be the outline off the full canvas we could use in Java scripts. Look, it's electable canvas and said it to be the full with, and also we can set the converse the heights just like that. And then it's a is that and then refresh the browser. Another considers default 300 by 150 pixels. Converse What you mentioned before. This is the default size and we can go ahead and change this. I'm looking even changes using it CSS or we can answer the height and width attributes inside the converse elements. So he we've added a stroke, which is just the outline off the rectangle. We can also use Phil Recht, which will fill the rectangle. We have a solid color, so let's remove. See Jack Straw stroke wrecked and it's time we used cdx dot bill wrecked inside here. This works just like the stroke from before the 1st 2 positions which I'm going to add A 00 is the top left hand corner of the compass. And this is where we want the rectangle to begin on this time under concepts a 50 by 50 pixels wide rectangle. It would save this and then reloads. The default color, which you see on the Congress is block. We can change your spice that in the field style color. So just above all rectangle here we considered CTX not feel style so we could send this to me any cooler, just like CSS. We can even use a color name such as reds. Which was he? Just here. All you can also set a hex phone you. So that's changed Red to be the hex phone you off e d d d reloads. And now we see a lie color on the screen. So this is how we can draw rectangles to the screen. We also have full control over, Basically open. I'm We will want to move it over the compass. We have some methods. Gold moved two handles on line two, which will allow us to draw to any coordinates on the campus. To do this, I'm going to set a new pill style. So it stands out. I said this to a color of red under here where they need to specify that we want to begin Puff. We have ctx thought begin path. So this begin, pop. My food will either start a new path. All it will reset a group of so we can then go ahead on and move to a certain position on the campus. We moved with CTX daughter moved to, so I'm going to move this to the center of the compass. We can use this with John script So come verse don't wig divided by two and then the white position off Come verse don't hide again. Divided by to give this in the centre off the campus. Now we've moved our pennant to the center. We're now going to create a line. I understand a t on the end of the If you actually say this and then reloaded bronzer. We won't see anything on the screen yet because we're not drawn any lines. That compass, all we've done is move to the position where we want to start. Actually draw these lines. We need to use CCX thoughts line to so he can draw to any position on the campus what you want. I'm going to go for 2 15 and then 50 on. Let's see how this looks and we don't see anything on the canvass just yet. This is because we need to set the stroke. All the fill. So the Strokers, the outline just like before when we looked at the rectangles. So after all of these lines, when he'd said, ctx don't stroke. And now we go to the browser, we should see the line now in place. Let's go ahead and on another line to keep this going so attainable. The stroke Looking at it. CTX don't line to this time. I'm going to set the values off to 50 and then one hundreds and give that saved them over to the browser. And there's a second line on the position off to 5100. Now we can go ahead and add a new line to Medford's on Dad. This to go to the start just here all. We also have a method available to us called Close Path, which will take us back to the beginning. So after the second line to we use CTX, don't close mouth inside the Rockets. We just leave us empty, and then this will automatically go back to the start saving and reloads. And now his clothes off. I will try and go along with the stroke to make the online What could also change the stroke to be filled? This will make a solid color inside the middle instead of just having the basic outline. Okay, so this is some basic uses off the Congress. The final thing we're going to look at in this video is how toe aren't a image to the compass. This is obviously really important to our project. Let's go back over to visual studio and take a look at how Conard an image. Let's remove all these examples but leave the two constants at the top. Democrats creates a new constants. Cold image. OMG Answer this to a new image. The next thing we need to do is set a image source, so you need to go ahead and grab a image to use. In this project. I have one on the desktop, and it's also available to download with its cost, too. So inside the photo editor, just open up this folder and then drug over the image Mine's called Iceland dot jpeg so we can go ahead and set the image sauce. We do this one access in the image. Constance off i m g dot source. A number could go ahead and set this to our final puff. Mine is in the same folder, so this could be simply Iceland dodge a peg if you give us to say we won't see anything on the browser at the moment because it said this on the screen would then need to actually draw the image using this context just a book. So is that the CTX thoughts draw image inside. The records were set. The image which you want to place on the campus, which is stored in the constant called I m G, were convinced that the position on the converse where want to draw this so 00 will set this in the top left hand corner save and then over to the browser. It reloads. We still don't see the image which were expecting on the campus. So one of the things we need to do before placing it on the converse is actually wait for the image to load. We can do this with on load methods, so I am G. Don't unload. How could set this to eight year six are a function and then moved raw image inside dysfunction. And now, if we go over to the browser reloads, we now see the images placed on the campus. The image is larger than the 300 by 1 50 default cover size, so to make it fit, we can go ahead and add some more values to the draw image method. So that's that the width to be free hundreds. I'm height to be 1 50 Too much of a compass reloads, and there's our image. No, the same size as a compass. Oh, another thing we can do is, rather than hard cold in the image to be 300 by 1 50 We could also adjust the campus so they come to start with and said this equal to be the same size as the image would I am G that would and also the same for the heights. So we'll set the e commerce start height to be equal to the image the height on Did I save a Number could remove on the hardcore Devo news from here, simply leaving in the image that want to load on the starting position off the top left of the compass if we don't go to the browser and reload when I say that the converse is stretching to be the same size as the image, so this is a basic overview. Are some things we can do with the canvas next one making use off the file upload ER, which were added at the top of the project just here. I will display the new image onto the compass using the same draw image method 5. Uploading and displaying images: Welcome back in this video, we're going to be using the filed Clodagh, which were added in the HTML just here. We're going to be selecting a image off the computer and then displaying this as the image source double O on the campus. If you've already don't so head over to the script dot Js and then clean up our code by removing any of the examples from the last video. You can't even this image section from the last video as well also be reusing this code in this video to so the first thing we need to do is create a new file reader. This file read. The object is going to allow words to read the contents of the file or, in our case, a image which is stored on the user's computer. So just above our Constance off image, make some space and create new Constance call reader on set is to a new job script file reader. So we'll come back to this in just a moment. But this fool, I was to use the file upload er input we wanted in the head smell selecting image. And then it said this as the image source. Compass. The next thing to do is to now Grampa reference to this file. Upload a So in the Haight smell in the import Gave this a I D off Florida. We can now grow up this in the Java scripts Down at the bottom. Install this in a Constance called Image Loader. On Set is to be documents daughter get element by i d and then passing the I d off Loda. We didn't want to listen out for any changes to this file input. So when a user aren't a new image, wouldn't want to trigger a function which is going to make all of this work so onto the image loader and then dot art event listener. It's going to listening for any events on our file import. The events that we want to listen for is the change event. It's over, triggered when a new image has been uploaded. When this happens, we want to run our own custom function. I'm going to call this function upload image, and then we can go ahead on create its function above. That's it. About a year six are a function so const upload image, Aun said. this to on a roll function. Have a go. So this function is going to receive the events details which have passed over from this event. Listener, we're going to start this in the value of e silicon accesses inside the function. If we only person in that one of only you just like this. We can also remove the brackets something before we set the final reader. But you're going to read the contents off the final off the user's computer. Let's do a quick console log inside of here. So come. So don't log on. We can check out the bony off reader he was to save and then over to the browser. Open the console. I never could select a final off our computer. I want to go for the Iceland image once more. Then open this up inside here we can see the results off. No, this is criminal because we need to grab the file data which is stored inside this events here, and then process to the final reader. But it's then read and then deal with accordingly. This file data would you have stored in in this event just here for this? He variable is passed from the file which will upload. So let's do a council log with the value of E. You can see how we can grow but these image data to reload and then choose the final once more. Open this up. We can grab this file information. We open up the events and then scroll down to the event targets, which is this input. And then inside these targets scroll down to files files contains the data which we need for this image. So open this up on here, don't positions. You know, you can see we have all the file information such as the name the last modified the dates and also the size off the file to now have all this file data she looked here. This needs to be read by something which could understand all of this. Unfortunately, the file reader has a method which we can use called read as data. You are all this Read ours data. You are l. Mefford is used to read the contents off this uploaded file. All this image someone go over to our function on said this now with the council log, we can and access I will read variable and then you see method off Read are states that you are Oh, inside his method when no one is passing our file data which we know was e don't target don't files we only have one file So this is an index position off zero This is the data were seen before inside of this console log opposition zero So now, once again, if we go ahead and do a console log on a log the value of reader on small open itself choose a file. It's like the image And now we see the final reader now has a result. So open this up. On this result is the image data which we now pass in Grace and I will have a result inside of a file reader rather than the volume of know, which would seem for okay, So like over 12 function, we can now remove this council long. So inside here we now have the final data we need stored inside this reader. But now just needs aren't a unload function the wait until the final reader is ready. So on. Reda, don't unload. Said this to a arrow function and then go ahead. Zardes, copy the image section from earlier, which displays the image to the screen. So companies full unload section. But if I could, the sounds of the project never come paces in the side of the final reader section. I'm looking also granted this image sauce. So could this out and then paces just after the image dot on load section paste this in robin as in a hard coded value off Iceland dot j peg. We can instead Sethi image source to be the reader don't results, which is the final data, which we added with the file of Florida. So that would give this to save and then over to the browser refresh and then choose a file click on the image and never goes. And now we see the file has been uploaded on added to the canvas as the image sauce. So hopefully this is working for you, too, and I understand there's quite a lot going on here, So let's do a quick recap. So over the projects, the first thing we did is grab the fall input, and then it started into a variable called image loader. Well, then, listen for any changes using the art event listener here, listen for any changes which will angle, head and trigger a function called upload image We could have just here. Emma created a file read available just about the top here. This fire reader and I was just read the contents off any finals or, in our case, any images which is stored on the user's computer. When this upload image function runs, it doesn't get any file data pastoral automatically. I'm storage in a variable called E. All this could be any name. Would you prefer this file info is in past 20 far reader using read data as you are. Oh, which will understand this image data, which is passed to it only once, or reader and the image has flown in would then go ahead and set the canvas, width and height to be the same. Anssi image within places image on the converse using the draw image method, which we looked at earlier. Then we set the image source to be the final results. Great. So this is a big part of our project now done with our images now uploaded next week on to learn about how to access all of the pixels which make up these images. Once we understand more about pixels, weaken them, play around with them to create our facts. 6. Understanding pixels: to understand how to manipulate images to other effects. First need to understand how pixels make up our images. We can grab the pixel data from our compass. He was in a method available called Get Image Data. If we go over to our script, not Js and then outside off upload image function I'm going to create Constance called Image Data is going to be equal to CTX thought Get image data, which we're going to use to grab all the pixel data from the campus. We want to select the full Converse Whitman height. So the 1st 2 values is thes starting position, which I'm gonna set at the top left hand corner off 00 within what set the width off the converse again. Just like early. You can hard called this with a fixed value such as free hundreds by 1 50 Or in case he comes changes in the future. We construct the converse that with, and also the e commerce the heights. So let's see what we're dealing with with a council long That's console log the value off image data which is this variable just here. Give that save and then reloads open up the console would right click inspects, click on council tab and there's value off our image data. So if we open up our image data just here, we'll see inside this data here we have on array like structure, which contains 180,000 pixel values. We also see below we have our heights on wit or 1 50 on free hundreds. So this next part is really important to understand when working with pixels. If we go ahead on multiplying, I will wit on the height of the countless. This results in a value off 45,000. So why instead, do we get 100 and 80,000 values return to us, which is exactly four times what we get here? Well, this is because each pixel on the compass is made of all four channels. We have the reds, the green, the blue and also the Alfa, which sets the transparency If we go ahead on open up this data just on here on open up. These drop down arose. We can see the results off each one Of these 180,000 values Currently each value is set to zero. This is because we have no image data loaded. We've just seen the results from an empty compass. But even though this is empty the 1st 45 years which is these 1st 40 just here. This is born pixel on each pixel contains this reds green, blue and alfa value. So each pixel has four pieces of data. This is a second centrist here. This is why we get 180,000 values rather than 45,000 which we've seen before. If you want to go ahead on and see the actual pixel data rather than only zero just here we can grab these two lines for code here could these outs and then place them in. I will upload image function. So inside image don't unload section. I'm going to have this just after the image has been drawn. Say this and then reload. Choose the image open itself. And then once the images on the compass, we didn't get this console Log off image data. If we open up this image data we can see this time we have more pixels. And before this is because the converse with on the height has been set by the science off the image. And also, if you go hands and open up, this data contains all the pixel data from the image. And you can open up any of these which you like again, just like before. These 1st 45 years is the first pixel. And then this is a second pixel. Just blow here. So the first value is the red and the green, the blue on the Alfa. All these values are between zero and 255. Just like when working with RGB a colors in CSS. If we scroll down, all of these four channels seem to be 255. So this is the Alfa. He also, uh, on the delta here, which means that transparency is really solid, where a zero would be transparent. So with this knowledge of how pixels are made up using the four channels, no one that we got four times the amount of values buck using the get image data, what we use what you've learned in this video by looping through these pixels and changing them to be different values 7. Looping through image data: with this knowledge of how we can work with pixel data. But now I'm going to live through all the pixels on our converse. I'm begin to make some changes to these values. So the first thing you want to do over in the script dot Js is to create a new function which is going to grab all pixel data. But I'm going to live through it all and then change the values one by one. What? I'm going to place these values back onto the converse with a new method called port image data. And then this will display the results on the converse which will an override the current image. So over any script Js, let's go down to the very bottom. So after our event listener, that's crazy new function. So const Animals called his change create a function and then inside here, I'm going to grab our image data which we used before. We don't need this image data inside dysfunction all this console log anymore So that could the image data also here go down to a function of change and paste is in so in just a bit, we're going to link this change. Born to one of our buttons on here, This isn't going to go ahead and grab all the image data from the converse and store it inside of all valuable. If you remember from before when we're over in the console and we are put it the image data . All of the pixel values was stored inside a property called data. Let's set up a constant called data on this is going to be a short court for image data. Don't data. After this weakening, go ahead and create a full loop which is going to live through all of this pixel data we have stored here. And then we can select the individual values so full guns creates our variable. Well, I unsaid is to an initial value of zero. But then once keep going while I is less on data Goldman, i e. This is going to keep running while they're still pixel data available, insider here and then the next part is really important. Say aye plus equal for plus equal formal increments. The value of I by four on each loop we do it is because, as we already know each pixel house for values the red, green blue and offer so incrementally by four on each loop will be the beginning off each set off pixel data Great Alu body with the curly braces. Then we can go ahead and set the new pixel Tater. So, data I answer this to be any value which would choose Let's go for 255 data. I will be the first fund you on each loop. So each sets off for values in a pixel on the 1st 1 in the set is red. So data I will affect the regulars on the compass we can angle heads on overrides the existing image just after this fall Loop with CTX thoughts on this time, instead of get image data, we're going to use port image data, So place the new pixel data back onto campus. The data want to place onto the converse is our image data. I'm just going to be opposition 00 which is a top left off the campus. So now all that's left to do is to grab one of our hatred, our buttons today and it triggered this change function. It's under the function. We can select our first button with documents thought query, select all. Then we want to select all button. So inside the brackets, we can add all button, which is the name of our elements before in the index page. Remember, we have lots of bones, so want to select the 1st 1 which is our index position zero 10 inside the square brackets here. No makin aren't our event listener to this button? We're going traditional for any click events on the button, which isn't going to ruin our change function. So on this in and now if we go over to the browser, reload and then select an image, open this up and click on all first button, I would now say some changes have been added to the compass, so we now have a red color being applied. So remember, from before we mentioned that data, I is the first of the four values we can change. It won't to select the green rather than red. We can select I plus one refresh, and then we can hopeless it once more. And then all the greens, the maximum value off 255 And finally, let's try the blue, which is I plus two. So this is the marksman value on a laudable image once, for all I know, first puts in no, probably was a set to the maximum off 255 on. Just so it's a little more clear what we're doing here. We can add a council log and then log our image data. You know, it's an open the console. It's like the image. Then click on the word blue effects. And now if we open this up, open a bottle of data and select any of these values inside of here. And now if we look at all of all pixel data, here you have red, green, blue. This is 255 Alfa, then red, green, blue again, which was set to 255 on Alfa Red, Green, blue and an Alfa. So if we scroll through all of these values, we can see the all now set to 255 because we're looping through in sets of four. These are the four values which we are manipulating. I is the value of reds I plus worn is a value off green. I plus two is the value of blue and I was free is the Alpha Channel. So this is all we need to do to applying effects to our image. Now it's just a case of a Justin equal of own use off all pixels, depending on which effect we want to apply. And this is what will begin to do in the next video. 8. Greyscale, sepia and invert effects: with the knowledge we now have just in the pixel values. We can now add some effects and link them to while buttons just on here. First, let's go over to the script dot Js Alma created a function which is looking through all of the pixel data on the converse and then currently was set in the blue value to be the maximum off 255. Let's begin my changing its function to be able grayscale function, which you're going to be hooked up to old first Putin. We also need to change the function name inside the event listener too much. So this is a grayscale too. Okay, So for the grayscale effect, we already have a lot off the data in place that we need to perform this task. So, um, consecrate a constant called gray. So inside of the full nube, great to Constance called great. I'm going to set this equal to a value which is going to be a adjusted value off the red, green and blue values. So let's select the 1st 1 off data I, which is the red also on this the green. So data My plus one And then finally the blue, which is data I was too stepping over red, green and blue values, all of it together. Now, to make the grayscale effects, we can alter these three values. So for the Reds, I'm going to multiply this by 0.21 the green value. I want to multiply this by a value of 0.71 and then the blue multiply this by 0.7 Now, these values are up to you. You kind of a little play around with these and see which works best for you. But these are good for a general guide to how to make a grayscale effect. No, what we need to do is use his grave on you and add it to our red, green and blue values. Let's set the red. It's equal to a constant of gray and then at this in two more times. So a green value is I postpone Onda. I'm close to Barbell blue. So give that safe And then if we go over to the browser, it reloads, choose our image. And then he grew scale and there's a whole gray scale effects now applied back to the image . The next one we're going to set up is the second put in here, which is the CPI function. We're going to re use a lot of the same code for the grayscale effect. But we just add some extra red and green values to give it a warmer version of other grayscale. So over to our script, that's copies grayscale function. So copy this from the bottom right up to the constant name and then places in just below. We can call this phone the c p A which is S e p I A on then down at the bottom. If we adjudicate this line, pull the event listener. This time it's button number one. I don't change grayscale to bcpl. Okay, so now we need to work with our function. We can still use the average. So the only difference is we need to add some extra values to this red on green. We can still use his gray which was set up inside the constant boats add some extra red values. So I want to add in 95 on also, if the green I'm going to Aunt of Unable 58 again you can play around with these and see which one suits you best. So give that save and now this is hooked up to the button. We can test. It sounds. It's like the image on the CPU defects. This is just like other grayscale function, but it makes it a little bit warmer, and it kind of has the effect off some old fashioned photos which you may have seen in the past. The next one we're going to get to work on in this video is the inverse function. The invert effect is also known as a reversed image because a reversed so, for example, like will become white and so on. This will give the effect we used to see when getting the negatives after developing photos . So to do this, we can copy the CPI function and then just put all this we can paste this in. Therefore we can reuse a lot off the same code. We don't need this gray section on here. It would also remove these consul logs from before, so they should be in all three of all functions. So back down to the 3rd 1 are makin rename this invert and then duplicate the event listener. This needs to be button number two, which is 1/3 1 in the list, and then change the function name to Inverse. I'm just going to work with the pixel data. This time. We're not going to be adding the free values together like we did with the gray scale, and it's CP functions. Let's remove these free sections here, some of the grey, all three lines. And then to do this, we need to deduct each one of these three values from 255 so 255 and then deduct data, really, and then we need to do the same for the green. But this time it's I plus one and in blue, his eye plus two. Let's tests over the browser, so save and then it refresh. Pull up our image on a strike, invert and that's it. The invert function is working correctly. Too good. We're now have our first free effects. Working in upcoming video will be creating more effects vice weapon around the red, green and blue values, along with its clear button at the end, which will remove any of the effects and reinstate the original image 9. Adding additional effects: For the final four effects which we're going to add to this photo editor, is just a case of swapping around the red, green and blue values when we loop through each one of the pixels. So for example, this is going to be the first function which we are going to be creating, which is going to swap the red, green and blue values, to be a value of red, blue and green. So we're effectively swapping the blue and green values around but its particular function. Will then swap the red, green and blue values to be equal to blue, green and red and then to green, blue and red and green, red and blue. Let's start with this red, blue and green version, by copying our inverse function. We can paste this in just below and changes to be a function name which matches of red, blue, and green, or RBG for short. We can then make sure that this button is hooked up to our function. This is the third button. It's also a click event listener and RBG, which matches our function name. So let's begin by removing the 255 values which we used from the inverse function and now it's just a case of swapping around these values. As we can see from the button name, the value of red, which is the first value, is going to remain the same for this function. So the data i is still going to be equal to data i. All we need to do is swap the green and blue values round for the second and third line. So the second line, we need to change around, so this is currently equal to green and we want to assign this to be the value of blue, which is going to be i plus 2. The third one now is a little different, currently we have the blue value set here and then we want to reassign this to be the value of green, which is i plus 1. However, just above, we've already re-assign the value of one to be equal to two, so we need to store this value inside of a constant, so it's the same as it was originally. We can do this at the top of our for loop, we can set a constant equal to the value of green, which is going to store the original green color, which is available from data i plus 1. So now we can change this and we can reuse this inside of our loop. So now the blue color is set to be the original green color before we've reassigned it on this line here. This is all we need to do now for this function, so give this a save and if we go over to the browser, we can try this out with our picture. Click on our button and the colors are now being swapped out. We now see the blue and green values are being swapped around, leaving a nice looking effects. Let's now do the same for our final three effects. So let's copy this function, paste this in just below. This one is going to be for BGR. Let's change it around the first value, which is currently red. We want to set this to be the value of blue. We can grab this with i plus 2. The green value this time is going to stay the same, so this is i plus 1, so the third value, which is blue, we want to swap this out to be the color of red. Since again, we already reassign in the red value, we need to store the original value from our loop and the red can be accessed with data, i. Swap out our variable name, we'll hook this up to the button in just a moment. For now though, let's copy this and add in our last two functions. The second last one is going to be the values of green, blue and red. So to begin, we want the green value on the first line and green is i plus 1, we then want blue and we can set this to be i plus 2, which pops out our green and blue. The third value is the red color, which we already have set from the last function, so we can leave this as it is. Remember we don't want to set this to be data i, which you see here because this value has already been updated with the value of i plus 1. So here we are grabbing the original red color from our loop and then possibly seen as our value. The last one we need to add if we copy this is going to be our last effect of the projects and this is going to be the color value of green, red and blue. The first value you want to grab is green and this is okay since this is from i plus 1. The second one is a value of red, which again, we already have stored inside of our constants. The last value is for blue and we can grab this from data i plus 2. Down at the very bottom, we can link these to our functions, so we've got the RBG value, let's paste this in three more times, so we've got RBG, the second one is BGR, we then have GBR and then finally GRB. Then change our button numbers which we're targeting, so four, five and six, save this and over to our projects, let's select our image and we can test this out. We've already tried the first one, so let's go for blue, green and red, that works fine. Let's try out the second, the last effect. Okay, good and then finally the green, red and blue and this gives us some nice looking effects to our image. It's a little bit inconvenient selecting a new image each time we want to try out a new button but in the next video we're going to link up our clear button to restore the image back to the Canvas. 10. Clearing effects: The final step for this project is the art. The functionality for is clear button on here. This will remove any effects and reinstate the original image. Doing this is pretty simple again will write a function which will be triggered when this clear button is clicked. This will then access the file readers original results and then set it to be the image source. So let's go ahead and create a function. So just after one last G R B function, let's create a new function called Clear Changes Said is to in Essex function, and then we won't need to do is access the results awful file reader. If we go up to the top of all functions now, go back to the start of all cold. If you remember from earlier on in this course we set the image source or the converse to be equal to the reader dot results, which is just here. So this holds the information about the original image. So now all we need to do is go back down and set the image sauce so McCain be equal to the reader that results So school down on inside of all clear changes function. Only to do is against that the image that sauce to be equal to this reader, that results and then in English to Oakley button So at a new button, which is No. Seven. And this is going to be called clear changes. Now we will go up on Do a consul look so console log on will answer the value of our reader . So for now, let's just calm in this out. Reloads, open up the console onset, one of over images. It's now if we click the clear to trigger the function room, we'll have our image stored in this results here. So this is why we use reader that results, so I'll give that save. You can remove the console log and then closed Consul down. It's like the image on If we aren't any effect, we can no click on the clear button, and then this resets the image back to the original form on. This works with all the buttons. So this is our project now completed. Hope you had some fun and learned some new things along the way. Feel free to go ahead and customize the look and feel of the are or even go ahead, I increase some additional effects. So bye for now and funds to taking this course. 11. Thank you!: congratulations. Reaching the end off this course. I hope this course is give you a better idea of how he html CSS and JavaScript could all fit together to create a useful on one project. We have covered quite a lot in this calls from JavaScript. Fundamentals such as loops functions on Constance right through to more specialised things such as 100 file data. Manipulating pixels aren't also drawing to the compass. We began by creating the user interface Onda playing at some basic styling. And then it was all about using JavaScript from learning how to draw to the canvas. Uploading images on also reading file data Fruits alone involved Lupin through pixel data on how to change the values. Thank you for me for taking this course. Hope you've learned some new skills along the way and also enjoyed building this project. 12. Follow me on Skillshare!: huge congratulations from me for reaching the end off this class. I hope you really enjoy it and gain some knowledge from it. If you've enjoyed his class, make sure you check out the rest of my classes here on skill share on. Also follow me for any updates on also to be informed of any new classes as they become available So funky once again. Good. Look on. Hopefully I'll see you again in the future class.