How to Build a Meme Generator with JavaScript (No Frameworks Project)

hey guys how you going my name is dom and today we're going to be building a meme generator using html css and javascript okay so this project here requires no external frameworks or libraries and it's perfect for beginners or just for those of you who want to learn or use the html5 canvas okay so right here on the right side we've got the final solution as we can see the user is able to choose an image for example i can choose this sample image right here then i can enter in some text so i can say for example something like hey guys and then it's going to appear on the bottom you know finalized image okay so it's actually really straightforward to create an old school meme generator just like this and of course you can enter in both the top and the bottom text so going inside this tab right here let's begin from scratch to create what i just showed you now keep in mind that the source code for this is going to be linked down below if you want to download it and follow it along okay so going inside this html file we're going to be working on the html and the css first before moving on to the javascript last okay so inside the body of the html right here let's begin by creating a new div with a class of meme dash generator so basically all of our html is going to be contained within this div right here next up we need to specify each label and input field so inside here we can make a new label called select oops let's go inside here and make this select an image just like this then we can drop down and create a new image with a sorry a new input with a type of file now we don't need the name attribute here but we're going to keep the id and just make this something like image file input okay then we can just simply duplicate these two lines so we can say now let's just do top text then we can just say a new input that type of text and of course here to specify an id of something like a top text input okay then duplicate this for the next one of course this time it's going to be bottom text then of course bottom text input okay if i save this in the browser we get something like this okay so let's drop down here now and make the final element it's going to be a canvas with an id of meme okay so basically once the user has inputted all of their data up here the javascript is then going to generate the image and place it inside this canvas okay cool so let's now use some css to make this right here look like this okay so going inside the style tag right up here we're going to be targeting the class of meme dash generator and inside here let's set a margin of 20px top and bottom and then auto for left and right to create a centered uh container okay then we can just set a width here of 400px okay alongside a fun family of sans serif if i save this now of course we get something like this in the browser everything is centered and of course has that 400 pixel container okay we can now target the meme generator and then target every single label inside there let's set a display of block okay a font weight of bold and a margin bottom of 10px to create some space between the label and the corresponding input field save this and we get something like this let's now target every single input field including the file input inside the mean generator and we're going to be setting a width here of 100 for these ones as well as a box sizing of border box just to fix some issues with padding as well as a margin bottom here of 20px to create some more space between the input fields and the next one save this and now we get something like this in the browser now if i open up the dev tools right inside here we can see that the canvas is actually not the full width of the container so we can fix that by going inside here and we can target the main canvas with the id let's set a width here of 100 just like that save this back in the browser and that is now fixed so we are done with the html and the css for the meme generator so now let's go inside the linked javascript file which is currently empty so when it comes to the javascript for this meme generator we need to first essentially grab every single one of our html elements and refer to them in the javascript so we're going to be creating a couple of constants right here we can say const image file input is equal to document.queryselector then pass through here the id of image file input so now of course in the javascript when i refer to the image file input i'm simply referring to the file input field right up here okay and we can do the exact same thing for the canvas as well as the the two text inputs okay so for these ones we can just say right up here top text input and get the id of top text input okay guys remember also to include the hash here in our in front of your id for the query selector okay and we can just make this one right down here the bottom text input and the same goes for the id inside the query selector and then lastly we can make a new constant here we can call this one canvas and this one is going to go to the id of meme just like that okay so now we have each one of our four html elements inside the javascript through these constants okay next up we need to say let's and then image so basically this right here is a variable that's going to get updated every time the user selects a new image okay so this is useful because we don't need to essentially re-read the image every time the user wants to change the text we can keep the existing one if they don't choose to pick a new image so we're going to see more on this later on but for now let's keep that right there the next step is going to be to declare a function so this function here is going to essentially render out the meme okay so inside here we can say function update meme canvas then it's going to take through a couple of things the first thing is going to be the canvas element itself the second thing is going to be the image okay the image element or the image object the next one is going to be the top text then lastly the bottom text okay so inside here just for now i'm going to console.log the canvas the image the top text and of course the bottom text just like that so now essentially we're going to be calling this function when the user picks a new image and we're going to see what we get down below here okay so right up here under the image we're going to be saying image file input dot add event listener we're going to listen for the change event so basically whenever the user picks a new image this function inside here is going to run so with this function the way it's going to work is we're going to be grabbing the first file that exists within this file input field then we're going to be converting it into a data url okay so inside here i just want to console.log what this data url is going to look like essentially if you guys don't know a data url is simply just essentially it's just your image represented in text in the form of a url okay so we're going to say const image data url is equal to url dot create object url then we're going to say e dot target my mistake sorry guys this needs to be image file input right inside here dot files then at index zero so basically whenever you pick a file inside this file input field there's going to be a files property and we're simply describing the first item in that list which simply refers to the chosen image okay so if i just console.log the image data url just like this save this go in the browser i'm going to choose that sample image from earlier in the console now we've got this data url so if i was to open this up in a new tab we don't get anything let's try and figure out why i believe it is because we cannot access it on a new page so that's my mistake guys but basically this url right here is going to actually one sec let's try this right here there we go apologies guys that's fine so we can see that essentially this data url refers to the image which the user has selected okay so now with this information we're able to essentially create an image object in the javascript and this image object is going to contain this url so basically from there we can provide that image to the canvas so it sounds like a bit a bit much a bit complicated but just bear with me i'm going to show you how to do it so inside the javascript we're going to be creating or we're going to be reassigning that image variable right up here to be a new value we're going to say image is going to be equal to a new image just like this then we're going to say image dot source is going to be equal to that image data url so basically you can think of this image right here as a standard html image element just like this okay so we've got this you know this this image in javascript so basically it needs to be now provided to the update meme canvas function okay so we're going to say inside here image dot add event listener because of course when you assign an image or when you change the image source okay on this image right here it doesn't happen straight away so basically we have to say image.event listener and listen for the load event on that image so basically once the source has been set we're going to run this function inside here okay so this function okay is going to then call this function so let's say update meme canvas we're going to pass through the canvas element right from above right up here okay then pass through the new image okay then we can say top text input dot value then say bottom text input dot value just to grab sorry just just to grab those those values from both input fields right there okay so i'm now just going to go in the browser i'm going to choose my file just like this then we can see in the console we get the canvas right here as an element as our canvas log we get the image tag right inside here as the image log then of course nothing for the text if i was to say for example hey guys then i choose the image once again we don't get anything because of course the image did not change so let's just refresh here and then we can say hey guys something like this then choose an image and then we can see we get hey guys right inside there so that's how it's going to work when it comes to changing your sorry when the user changes the file okay now this load right here should probably only happen once so we're going to go inside here we're just going to say put a comma then say inside here inside brackets we can just say once is equal to true on that event for the load that's just simply because we don't need to you know continuously check for the load on the image okay cool so let's move on now to essentially just dealing with and actually making making this update meme canvas function work so the the code inside here is probably the main part of today's video okay so this is actually going to be working with the canvas all right so the first step in actually rendering out and creating the meme is going to be to grab the context of the actual canvas so we're going to say const context equal to canvas dot get context then we can pass through 2d just to get the 2d rendering context okay then we can say const width is equal to image dot width so we're going to be setting the canvas width and height to be whatever the image width and height is okay so we can say const height is equal to image dot height just like this and then we can drop below and we can just say update canvas background so when it comes to updating the canvas background we're going to be setting like i just said earlier the canvas dot width is going to be equal to the width provided by the image the same goes for the canvas heights okay just like this then once we've set these two the canvas is now the exact same dimensions as the image which means we can just say context dot draw image then pass through here the image element slash object which we pass in and we can draw this image at the zero and zero position so i'm going to stop here save this go back in the browser choose my file and we get something like this as we can see of course you know the image here takes up the entire width and height of the canvas because of course we're setting the canvas dimensions to uh to the image okay but also keep in mind that the css on the mean right here this width is independent to this width right here so basically the css is just going to constrain what the user sees but realistically even though this right here might be 400 pixels wide the canvas itself is actually a lot bigger than 500 pixels if your image is bigger than 500 pixels so i hope that makes sense guys essentially your canvas dimensions is different to what your css is going to set so the css is just going to scale or shrink your your visible canvas but the canvas still has its own dimensions hope that made sense okay now we've done this we can just declare a couple more variables right up here the first one is going to be a constant chord font size is equal to math.floor then we're going to say width divided by 10. so basically this font size is going to be used as the font size for your meme text so we're just simply calculating this using the width of the image we're saying give me the width of the image divided by 10 and this right here is going to be the font size for the top and bottom text okay so you can make your font bigger by saying divide by five or six or seven whatever you want but basically you want to make sure you use the image width so you get a relative font sizing as opposed to an absolute font sizing okay cool so next up we can say const y offset is equal to height divided by 25 so once again we're just using the height here of the image to create a y offset so this y offset refers to the space between the top of the image and your text and the bottom and that text okay so going back to the example here basically this wire offset refers to the space between top of the image right here and the text of your top text okay so once again just using a relative sizing here using the height of the image to give us you know that spacing that way it's consistent if you upload a different image size it's going to it's still going to look okay so dividing the height by 25 gives us that small amount of space therefore the text okay cool so let's move on now and basically just prepare some of the text okay so we're going to say prepare text right here and when it comes to the text itself we need to set a couple of things so firstly let's work on the outer stroke on that text okay so that black stroke so we're going to say context.stroke style is going to be equal to black so basically just creating a black stroke or border around that text we can then set the stroke width or the line width here to be once again just using a relative size so we're going to say math.floor and then we're going to say font size divided by 4. also guys the reason why i'm using math.floor here is just to give us a whole number once we've divided our numbers here so of course just getting the font size dividing it by four and that right there is going to be our border or our um you know our text stroke width okay cool next up we're going to say context dot fill style is going to be white and this right here refers to the actual text itself you know that you display next up we can just say context dot text align equal to center so this right here helps us to display the text in the center of our you know image okay we can now say context dot line join equal to round so this right here essentially ensures that we don't get any weird spikes in the stroke of our text okay so if you don't have this you might get weird looking spikes in your text okay we can now say context dot font is going to be equal to and here's where we're going to be setting the font size so we're going to say right up here passing through so i'm using here the back ticks neither one on your keyboard basically just the javascript template strings which allows us to then say dollar sign then curly braces then pass through here an expression for example i can say font size then i can just say px after this so basically if for example the font size turns out to be 15 this would just be 15 then px just like this by using you know this expression inside here then put a space and we can just say sans serif okay so that's just our font family you can make this whatever you want okay so right here we've simply just set a couple of things on the canvas context to prepare us for actually rendering out the text okay so when it comes to rendering out the text we can just say right up here add top text okay so we're going to be dealing with the top text first we're going to start by saying context dot text baseline is going to be equal to top because of course we're going to be working on the top and this right here once again just helps us with ensuring that essentially our text is going to add here to our y offset i'll show you what happens if i don't do this text baseline very shortly and right down here we can just say context dot stroke text and this right here is going to give us that border or that stroke around the text now when you when you use the stroke text we need to actually specify what text to you know create that stroke with so we're going to pass through here the top text right here which gets passed through to this function so top text right there then we can just say for the for the x position because of course when you say to the canvas you know render out some text we have to say where the text goes so for this i'm just going to say width divided by 2 and this is for the x-axis for the y-axis we're just going to say y-offsets just like that so i'm going to stop here i'm going to save this go back in the browser i'm going to choose a file actually you know what let's put some text here we can just say hey guys okay i'm going to choose a file and we get this right here as we can see we've got the stroke on that text in the center we've got we've got the the y offset being being used here to create some space between the top and of course the text and now what happens if i don't include this text baseline well if i comment this out save this type something inside here and we can see now of course the text appears on the top because basically it's being rendered in the center of the text right here by default we actually want the text to start rendering from the top of the actual you know characters so having that text baseline is going to ensure that that actually happens so we've got this stroke we need to now say context.fill text and using fill text we're able to then say once again top text passing it through and just say width divided by two and the y offsets are basically providing the exact same arguments as the stroke text this time it's going to be white and of course actually filled so save this type some text hey guys just like this choose a file for example our sample image and of course now we've got that filled white text as well as the border okay so now it's going to be as simple as just doing the exact same thing this time for the bottom text so we can make this bottom right down here we can make the text baseline also bottom then of course we can just say bottom text for these two right inside here and now this is where the y offset changes so we need to basically make the y offset relative to the whole height of the image so basically for this one here it needs to be give me the height of the image for example it might be 600 in this case the y offset might be 15 so 600 minus 15 gives me 585 and that is the y position of the image so of the text okay so do the exact same thing for the fill text and now save this put some text for example hey guys you know how's it going choose a file and we get this right here so it's all working perfectly fine we are complete with the update meme canvas function okay so next up we need to simply make it so when i choose some text for example let's change this i want of course the text here to change so this right here is very straightforward right under the image file input at event listener we can make a new event listener and we can just say top text input dot add event listener when the text changes inside here we're going to run this function so the function that's going to be ran is going to simply then call the update mean canvas function so go inside here run the function pass through the canvas the image then of course the top text input dot value then the bottom text input dot value the exact same thing like we saw up inside here with this line okay cool then we can do the exact same thing this time for the bottom text input when that one changes we need to simply grab all of the existing data and update that meme canvas so now i can choose a file just like this i can now change the text and change this one and it's all working perfectly fine so that right there is our finished product okay so that's how to create or build a meme generator using html css and javascript if today's video helped you out drop a like and subscribe and i'll see you guys in the next video

Channel: dcode

Views: 3,361

Keywords: html css javascript project, beginner html css javascript project, beginner javascript project, javascript project tutorial, html css javascript tutorial, easy projects for javascript beginners, easy html project, easy html css javascript project, easy javascript project, how to build a project with javascript, html5 canvas tutorial, html canvas tutorial, html css image tutorial, javascript image tutorial, javascript data url tutorial

Id: io5FcMAdLyQ

Length: 25min 47sec (1547 seconds)

Published: Tue Aug 24 2021