Byline Radix-64 Made Easy

Byline radix 64

hey guys hey going in this video I want to talk about base64 encoding when it comes to JavaScript so first off for those of you who don't know base64 is basically a way you can encode information and it's typically used when you want to send binary data over a text-based protocol such as HTTP or you can also use it to ensure your text or information does not get corrupted during a transfer for example you can submit an HTML form using base64 as the encoding type in this video we're going to take a look at an example where we're going to be uploading an image using a base64 also it is not a way to conceal information or data so by no means should you use it as a method of security by itself because you can easily convert a base64 string back to its original form in just about any programming language so with that being said let's go inside the text editor right here and begin by looking at how you can actually create a base64 string within JavaScript so let's first define a string up here so we can say Const STR is equal to something like a decode so right here this would be our original string so we're going to do two things here firstly we're going to convert it into base64 and then convert that base64 string back to its original form we're going to be decoding it so let's create two more constants right here we can say console base64 is equal to B Toa we're going to pass in a D string right there so this function right here in JavaScript converts the contents into a base64 string or at least encodes it to base64 and we can then say once decoded is equal to a top a TOB pass in here the base64 string and that'll decode the base64 string back into its original form right here so now I could simply log at these three constants so I can say console.log I'll just say original then I can say plus STR and do the same thing for the base64 all right put that there and then I can surf course decode it down here so I can save this and refresh the browser in the console we get this right here the original the base64 encoded string and then the decoded so decoded version of this right here so this here is our base64 string and that is the basics of encoding and decoding base64 in JavaScript so let's see how we can actually use base64 so we're going to be creating an html5 canvas down here and then uploading the canvas image to the server using base64 so just real quickly I've got this PHP script right here called upload dot PHP we're going to be posting the image to this file right here this file is going to decode the JSON body that we're going to be sending across and then it's going to base64 decode the base64 string we're going to submit of the image and then it's going to save it to a directory called PNG and then the image name is going to be the current UNIX timestamp dot PNG so basically after we're done we should see the uploaded canvas image inside this PNG directory right here okay so let's go back inside the HTML I can just get rid of all this stuff right here and then we can create a new canvas element so I can say canvas right here with an ID of my canvas let's give it a width of something like 300 and a heights of let's just say 120 okay and then I can have a little line break here and then a button to actually upload so I can say button it's last button and then say upload right here I'm also an ID of BT and upload to reference it in JavaScript so now I can save this and refresh and we have this right here so now let's do some basic drawing on this canvas to actually get some contents so let's go back inside here inside the JavaScript let's just first get a reference to both the canvas and the button so I can say right here Const BT and upload is equal to document to get element by ID pass in BT and upload right here.look and do the same thing for the canvas so my canvas and my canvas we can then get the canvas 2d rendering context so we can say concepts is equal to my canvas doc gets context pass in here 2d so just some of the other ways you can draw on the actual canvas and then down here I can just draw some random things for example I can say CT x field star let's just do a light grey I'll make of course that'd be the whole background of the canvas so I can say CT X dot R X zero is zero my canvas width and then my canvas if I can't start height then I can say CT x dot feel okay so I can save this and refresh the browser and we have this result right here so now let's also add some text on the canvas to make it a bit more interesting so I can just say down here CTX feel style let's make the text blue we can say see TX dot font is equal to 35 px serif and finally we can say CT x field text let's fill it with a text for D code base 64 for example at 30 and 60 so we are now done with the actual canvas I can save this and refresh and we have this result right here so for the actual upload process we can define a function so back inside the JavaScript let's make a function that called upload canvas image and this one right here is going to do all of the base64 conversion of the canvas and then it's going to upload it to this file right here um so I can then just say BTN upload dot add eventlistener when the button gets clicked to upload we're going to run the function of course upload canvas image so now inside here to get the base64 string of the actual canvas you can do this by using the two data URL method on the actual canvas so I'm gonna say right here Const base64 is equal to my canvas dot two data URL okay so this method but here is going to give us the data URL containing the base64 representation of the canvas image so then I can just say down here console.log base64 so I can now save this and refresh click on the button right here and we get this so this one here is that Aurora of course while here we can see our starting after this comma is the base64 representation of the canvas so we have a few more bits of information before the comma such as the fact that it's base64 and also the image type so of course this right here isn't actually part of the base64 string it is only everything after the comma which means we need to distribute this first half to do that we can go back inside the editor and we can say dot splits we're gonna split on the comma then we can say at index 1 so at index 0 would be all of this stuff right here at index 1 is going to be the comma onwards so now if I was to refresh we now get in the console only the base64 string right here and they're going to be sending this over to the server within a JSON object so we can see how it's quite easy to post an image using base64 okay so back inside the editor let's go down here now and create a new constant for body this will be what's going to be sent through as JSON so we might as well have something like generated acts as a bit of extra data make it a bit more interesting we can just say new dates and then dot - I so stream basically just telling us when the image was generated and then we can say PNG so this key is going to contain the base64 string so I can say base64 right here and now of course the files to log this here save this and refresh we get this right here let's post this to this server so back inside here we can simply just say fetch upload dot PHP make a request to the PHP file just like this and then we can say the method will be a post request of course and the body is going to be JSON of dot stringify we're going to convert this object right here the body into a JSON string and then we can say headers of course content type as JSON to actually tell the server you know this is going to be some JSON and we are all done so now I can get rid of this down here I can save this and refresh I believe one last time I can press upload and we can see inside of the network tab we have successfully posted across the JSON contents sorry yeah of course the JSON button most importantly we're posted across all of the base64 string right here and now inside the the folder here we get the image right here as a standard PNG file and that is base64 encoding when it comes to JavaScript thanks for watching guys and I'll see