Compress Images Before Uploading for Performance | JavaScript

[@Dovvik]

This one was helpful. Dispite some misleading things such as : - All intermediate usages of DOM HTMLImageElement are not necessary (and actually adding confusion, should have been using new Image() objects for clarity) - line 29 of your code is wrong and I don't know why you don't get an error (the first parameter of .toDataURL() call is incorrect, should be directly the target type instead of the Image itself) But at the end of the day, the procedure is nicely describing how to resize an image with canvas and I wouldn't have achieved what I wanted without your help. So thank you.

[@codu]

Old habits for me I guess! I will check that out and do an update over the coming months. Been a while since I looked at the code for this so I will take a look 👀

[@AshtonMotana]

Great tutorial, finally found a an example of working code to resize images.

[@LibraryOfTheOligarchs]

This was helpful! Appreciate you!

[@Fedupbrummie]

Hi , what programming tool are you using , I'm just using gedit a linux text editor but what you are using looks far better , thanks for the tutorial

[@marimuthur9456]

Your really awesome it's very easy to understand as well as easy method too thank you so much👌🏼👌🏼👌🏼👌🏼

[@GraemeWant]

Very Good. I have done this before, but never really understood what was happening. Thanks, very informative.

[@patcodingcodester9781]

Dude small suggestion, but you should make sure the thumbnail video shows code. Maybe I missed it, but I almost went right passed this video because I wanted to see an actual example. I'm really glad I ended up clicking though. Great content and exactly what I was looking for. Thanks!

[@EddieMao]

Fantastic tutorial, I like it.

[@FredySandoval_123]

Men! I read it and read it, and I just couldn't get it, but your explanation was awesome.

[@MrOlivom]

Hi man! Thanks for the video! How can I upload the new image into database? Thanks again!!

[@fauzi5848]

excuse me, may I know what font and color scheme do you use sir?, it looks so charming

[@jayraj3872]

Thank you...the javascript code works very fine....but can u please tell how to replace the original Image by srcEncoded (compressed image) while uploading.

[@SAMIULISLAM-qf4dq]

Iam also facing the same problem... Can anybody please help...

[@dchubad]

you can't. The fileList is readonly.

[@neza05]

Let's give it a try.

[@SAMIULISLAM-qf4dq]

How can i upload this compressed image file on server ??

It is also my question. Could you get that to work? I saw in same places they use canvas.toBlob and create a new File in its callback function but nothing seems to work for me.

[@cahyosu763]

this what i need, thanks

[@davidkeyemm2332]

Hello Codù Community, thank you so much for this tutorial. It helps me a lot, I'm just starting to learn JS. Can you tell me after compressing the image, how to upload to my server ? Should I use formData ?

[@thatgeezeruk]

This is so gorgeous - can you do this on multiple images?

[@zamtouch]

awesome stuff bro... really added great value to my project

[@niyampoudel2520]

Hey Man, thanks a lot, one question, How do I get the srcEncoded out from the onload function. Thanks

[@kasperkat2004]

This was an excellent explanation ! Please do one using libwebp / cwebp for a folder of images . I have a grandfather from Northern Ireland .

[@davidofug]

This is awesome. Thank you How about allowing a user to resize and a crop an image by themselves. Thank you

[@jguille26]

hi thanks for the content. I hope you are fine! a query. How could I send the compressed image to a folder on the server as an image?

[@botanmh]

it is great, but how can I convert srcEncoded to a format such as we can get from (document.querySelector("#upload").files[0]). because when I POST to API backend using axios, it will be reject.

[@zandp7629]

Thank's brother

[@urosciric8030]

Thank you so much! I will attempt to make an npm package based on this

[@shubhsaraswat4096]

Any luck?

[@urosciric8030]

@@shubhsaraswat4096 Yes, it works very well. I'm using it in my masters degree work. I'm building a barebones lightroom so it's taking some time.

[@bidyutmahanta85]

Hi, Can you please tell the type of e in the image onload function?

[@AshishRawat-zl6te]

Amazing video Man !!!

[@cyber_Dean]

Excellent

[@NERD_T.I]

Thank you very much, save my life!

[@scottmcmahon7209]

Towards the end of the video you mentioned that if I was to upload the image to aws S3 I would need a multistep form. Why would I need a multistep form if I am going to upload to aws S3?

[@ulohhijbuloh8266]

how to upload the image has been resized to folder?

[@RohitKumar-xs3wh]

great tutorial bro! thank you.

[@codu]

Thanks!

[@AnkushMhaskar-p3v]

i upload the png file so this compressed or not

[@dchubad]

i tried this but it just uploads the original file size. once files[0] has a file it becomes readonly

[@tarakaramsurala1305]

"Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported." Can you please help me on this issue

[@AshtonMotana]

I came back to this as I've made a ton of progress, The quality setting doesn't change the quality of the image, so when you convert the base64 string back into a Jpeg blob and then to a new File, the jpeg will not be compressed, only resized. same photo downsized to 720p as uncompressed jpeg is 724KB, but when converting the canvas to a webp, the same outputted image is 85KB canvas.toBlob((blob) => { const myImage = new File([blob], "myNewImage.webp", { type: blob.type }); console.log(myImage) testFunction(myImage) }, 'image/webp || jpeg', 0.5 || Quality) // if you change the 'image/webp' to image/jpeg as well as the name with file extension, this will create as a jpeg and the file size will be larger the webp, but not nearly as large as the uncompressed jpeg, 144kb. This is fantastic now.

[@scottmcmahon7209]

Also, the title of the video says that you are compressing the images, but from what I can tell it looks like you are resizing it. Can you compress and resize images using your method in the video?

[@PTM1008]

I didn't get the part where you said "you can use multi-step upload if you're using something like AWS"

[@storybox1234]

This code is good, but what about the srcEncoded image upload using php? please replay!

[@codu]

I decided to keep the video shorter and on the resizing part. There are different ways people handle uploading of images for optimisations and if I went the route I would have ended up talking for another 20 minutes. 😂

[@cotigasenegal]

This code is cool, but what about the upload? A bit of PHP after the JS to upload to the server would be welcome (for me anyway :)

[@codu]

Time is usually the issue. I think there’s a good few questions from people here so I might do a video soon showing an end to end solution 🍺

[@szymonpopielarz7701]

@@codu Did you make any video about this? I wanna create form with resizingimage. It will be very useful.

[@BiharGaurav]

I see that you have done resizing instead of compressing. Can you share some code for compressing?

[@Shinerweb]

I also created demo with code, if you want code then please check out our profile

[@robertkylethomas173]

Thanks mate, you just earned a subscriber

[@codu]

Thanks for the sub! Great to have you here 🤘

[@robertkylethomas173]

@@codu quick question the API I'm posting the smaller image to is expecting an image with the type of File - is there an easy way to convert the smaller image to a file?

[@codu]

I think you can do something like canvas.toDataURL("image/png"); If that doesn't work fairly straightforwardly let me know! There is always a way 😁

[@robertkylethomas173]

So this is how I got it to work eventually - after following the steps in the tutorial: const srcEncoded = ctx.canvas.toDataURL(e.target, "image/jpg"); fetch(srcEncoded) .then((res) => res.blob()) .then((res: Blob) => { this.shrunkenImage = this.convertBlobToFile(res, file.name); }); Then the convertBlobToFile: public convertBlobToFile = (theBlob: Blob, fileName: string): File => { return new File([theBlob], fileName, { lastModified: new Date().getTime(), type: theBlob.type, }); }; There probably are nicer ways of doing it but that worked for me

[@nurullosulaimonov5663]

I have tried but srcEcnoded is "data:," . why it is happening?

[@codu]

The line `const srcEncoded = ctx.canvas.toDataURL(e.target, "image/jpeg");` converts the canvas to a image data URL (which you can use directly as an image or or to save the image as a string if needed), it just gives a simple way of working with the image file. developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

[@medley5670]

@nurullo sulaimonov see this! stackoverflow.com/questions/30079423/canvas-todataurl-returns-data

[@muhammadnurfaqqih4651]

its a really good video, many thanks man, just need more improvement on your explanation 🔥🔥

[@yousuf4you]

one of the best video... ❤️️

[@issaissifou3579]

Thank you so much!

[@danielsousa5611]

Is it possible create a new input name="image_thumb" filled with the resized image for submit as, and with, original image?

[@bz6304]

Love your videos. Towards the end, I got this error in my console. app.js:15 Uncaught DOMException: Failed to execute 'readAsDataURL' on 'FileReader': The object is already busy reading Blobs. at process at HTMLButtonElement.onclick

[@codu]

Let me look into it, I haven’t seen this error or jump into the Discord so you can share your code and I can help 😄

[@othellovancalbert1541]

Hi, I' am really excited that I ran into your KZbin. I just subscribed. However, I keep receiving "Uncaught TypeError: Cannot set property 'src' of null" >app.js:11:19; 14:44; index.html:11:37 via vscode debug console and from same error via Chrome's inspect > "at FileReader.reader.onload" (app.js:14) document.querySelector("#input").src = event.target.result; I even update the app.js from Github. I am connected, able to upload an image, but no response when clicking the process button. Am I missing something?

[@mcifci]

thank you

[@usama_khalid]

great video ... thanks....

[@tuanbui3023]

this way doesn't keep original size of image. I want to keep width and height. I use quality option to compress image with same original width and height. But with same original width and height, canvas maybe make size of image larger. So i have to calculate agian to the size i want. Can you suggest some another way to compress image but keep original width and height? tks a lot

[@aleksandarhristov5695]

Much appreciated!!!

[@codu]

You are welcome!

[@guldenizeryilmaz6548]

wery thanks. wish you shown we to how to put srcEncoded instead of file[0] . ( HttpPostedFileBase file WebImage img = new WebImage(file.InputStream); if (img.Width > 1000) { img.Resize(1000, 1000); }) Because I send original file[0] server and resize image on server, I saw image with for example 1000x1000 and size:101 kb but I send srcEncoded and convert srcEncoded to image file, I saw image width 400x400 but image size 517kb. note: original file size : 2610kb

[@mylearningclub6179]

thank u

[@divyamishra9615]

Can we check the size of the resized image that we are getting in canvas?? Like i had a 4mb image after resizing how to check the size of that same image?

[@codu]

I haven’t actually tried that, I’ll do an experiment with it 🤔

[@divyamishra9615]

@@codu if you try and succeed, please post about it.. i am stuck with something similar like if i want to check whether the resized image is smaller than a particular size (ex: 1Mb), there is no property to check that.

[@erturkyorulmaz7376]

Sir, Although ı choose a .jpg file, when ı want to save new image as, it is a .png? What shoul I do?

[@yassermartinez5910]

Could you solve it?, I have the same problem

[@erturkyorulmaz7376]

@@yassermartinez5910 No.

[@p21qq18]

why my output is not showing , help me please

[@developerhabits]

Nice video!

[@codu]

Glad you enjoyed it, keep up the awesome work yourself 💜

[@ariebervoets419]

Great tutorial. But resized image looses EXIF and IPTC data.

[@codu]

That’s a good thing to note! I totally forgot about that as a side effect

[@psychedelarte7257]

Merci

[@شرطةمكافحةالحكاكين]

ولا ولا خد قلبي يلا take my heart

[@codu]

Thank you!

[@yudelko]

You are just resizing the image ...not really compressing it ...that to implement an algorithm for example like jpeg

[@esrefatak]

Sorry, but this is not compress, it is a resize exactly

[@turtrueweb]

+

[@thechoosen4240]

Good job bro, JESUS IS COMING BACK VERY SOON;WATCH AND PREPARE