Compress Images Before Uploading for Performance | JavaScript

in this episode we are going to go over how to resize an image on the client-side so that we can send optimized file sizes to the server when we have to upload an image often when we take a picture or selfie on our phones we'll have a few megabytes in size and we might need to only upload it for a 200 square pixel profile picture and that could be kilobytes so by using this we can create faster upload speeds and be mindful of people with poor connections this is the second episode in a series on which I go over tips and tricks to build a better performing web app for people with poor internet connections so let's jump into this episode [Music] okay and welcome back so we have a little bit of boilerplate here set up just so we can focus on only to JavaScript and what we're going to do here is just have a look and make sure you have an input here that has the accepted file types and we are going to use this with the ID of upload to target this as well we're just we added a button here as well to process this or do the resizing so I've just called this function process for now and I've added two empty image tags for now just so I could show you a preview when we're going along of the before and after resized images and obviously we need to have make sure we have the app j/s linked up if we look into styles there's very little and in the app touch is right now I just have a console.log to say I'm connected so let's jump over to the preview just so you can see what it looks like and as you can see super basic here and if I hit process yeah we get I'm connected so everything is working and the first thing we're going to do is grab the file from our input so let's create a Const called file and that is going to be equal to the document dot query selector and we have the ID of what's in a string we have the ID of input that we can target and that gives us back dot files which is an array so we are going to just get one image so we'll take the first element that is in that array and just as a sanity check or just to make sure we're not processing when there is no file a little quick check I'm going to add in here is if there is no file then we are just going to return straight away so that we automatically return out of this function and don't continue now the next thing we're going to do is create a file reader that's just so we can a synchronously read the contents of a file so we'll call a new Const reader and that is going to be equal to a new file reader and with this reader we have a properly on there called read or a method that we call read as data URL and we can pass in the file and we will get back a base64 encoded data URI which we can use then to pass in or pass through or preview our image and everything else once we have that there when this reader is finished reading this file it'll trigger a dot onload event that is on the on the reader and what we're going to do is set that to be equal to the function that will actually resize our image so to do that we are going to just say reader dot onload and that is going to be equal to a function and that has an event that goes into it and we will define the rest of our stuff in here to resize this using the canvas element what we're going to need is an image element to put into the canvas so the first thing we're going to do is create an image element oh I am terrible at spelling clearly Ella meant and that is equal to document dot create element image and that will give us a new image element the next thing we're going to do is set the image element to that URI or the source of it so we'll say image element source is equal to the event dot result and that's our base64 encoded data URI so we can actually preview the image straight away now once that reader is loaded it and let's say document the query selector and now I'm after noticing something that I'm after doing silly here because it's actually the ID input that I am using as a preview element for me so I have to change my typos up above in a second so source is going to be equal to the event dot target dot result and this is just to show you that we can see it so if we just jump back up to the top here of where I'm grabbing the file I'm not gonna grab the father from here it was actually called in here I have an ID of upload that I forgot about so I'm just gonna change this to upload and now everything shouldn't blow up but let's just make sure this is working and that we can grab everything oh and I spelled Const wrong there we go so now let's jump back over and if we choose a file I have a nice kitty here and we process it we get the preview of the full image and as you can see it's massive so I'm going to refresh that and jump back over so now the next thing we're going to do is after that image has been loaded we are going to listen to that image elements onload event kind of like we just did with the reader and then we're going to put it into the canvas resize it and get our new output so to do that we do the exact same as we did before except with the image element so we'll say image element dot on load equals function which is also going to take an event and just so we have reference to two different events I'm going to use an e here to make sure that we can reference the two different events here let's create our canvas element so const canvas is going to be equal to document dot create element and it's going to be a canvas element we might as well set up our scaling here so let's set up a max width for this if we what I'll do is I'll just keep some aspect ratio so we're gonna imagine that we have a max width that we want so let's create a constant to define the max width so we'll say it counts max width and you could make this a variable for the function if you wanted to reuse this that is going to be equal to we'll say 400 to keep the aspect ratio we're gonna need a scaling size so I'm going to create a variable called scale size here so we'll say constant scale size is equal to max' with / the e-dot target dot with and that will just give us a ratio that we can multiply our height by in a second to make sure that when we start to shrink this we don't lose the aspect ratio now you can play around with different things here to get more complicated but for this instance it should be good enough so let's set the canvas dot width to be equal to the max width now we're going to set the height and instead of the having a variable here we want to keep the aspect ratio so we're gonna get e dot target dot height and we're going to multiply that by the scale size this will enforce the aspect ratio when we go to do this in a second next thing I'm gonna do is create some canvas context and I want to create it as a 2d context because we're working with a flat image here so we'll say Const CTX is something you'll see always for or something that's very common to see anyway as a reference to the canvas context so we'll say canvas dot get context and we'll give that a 2d context the next part is we're going to draw the image into our canvas and make sure it's equal to the width and height so we'll say CT X dot draw image and this takes a few parameters here so we're going to pass it the event target which is the entire image element i'll console.log that out for a second so you can see that and we are going to position that at the start top left and to do that you'll go 0 and then 0 and then we give it the x and y axis so the width and then height so we'll say canvas dot width and the canvas dot height we're only two lines off finish this completely so what I'm gonna do is I'll console.log out that II got targets so you can see it in a second just so you understand what's in there when we have this complete so we want to get the encoded value here so that we have it compressed and and we can use it for the preview so we'll say Const source encoded is going to be equal to the context CTX again canvas dot two data URL and we'll pass in our whole element so either target and we'll tell what type of imagery wants so this by default would default to PNG but I wanted in a JPEG so we'll say image JPEG this I think takes a optional last parameter no does that yeah so I can see it too here in the preview it's the quality is value between 0 and 1 for the quality of the compression I tend to leave it out and I think it defaults to something like point 9 to somebody in the comments I'm sure will tell me more about that but I I often just leave that out it seems to do a good job without me touching anything in there and now let's see a preview of our new image so we'll say document the query selector we'll give this deep and I forgot straight we'll give this the output you and the source is now going to be to that source encoded so that we can preview it saved this and actually what I'm going to do while I'm here just so we can see you can see this eat our target because I reference it a bit I'm going to just console.log that Y dot target so you understand what's in there when we're throwing it around so much now let's jump over and see what happens so let's choose a file I have my kitty again we'll open it up hit process and now you'll see at the bottom in the airport tag we have a drastically smaller version of that and if we jump over to here you'll see that we have as the EDA target we get that entire image tag and that's what we're passing in to the canvas to use now let's refresh jump back over to here you can then sent this source encoded straight up to the server or to your to your database or wherever you want or you can play around with it maybe you want to send it as a binary or anything else but for a lot of apps for the smaller apps that I've worked on I've often just used this source encoded you might need to use a multi-step upload if you're using something like AWS but at least you know now how to resize the image to get the most optimized version of it up so I hope you found this video helpful and if you did I would love if you hit that subscribe button and until next time happy coding [Music]

Channel: Codú Community

Views: 20,638

Keywords: How to upload a file in javascript, learn javascript, javascript performance, file upload, resize image javascript, image resize, make app faster javascript, codu community, codu, javascript tutorial, tips for slow internet, resize png javascript, resize jpg javascript, resize jpeg javascript, Optimise images for web app, fast image upload js, faster image upload js, image optimization for web, image optimization javascript, image compression js, smaller images js

Id: bXf_UdyDzSA

Length: 15min 28sec (928 seconds)

Published: Wed Jul 01 2020

Reddit Comments

[u/CyrisXD]

Nice work, thanks for the video!