ฝัง
- เผยแพร่เมื่อ 5 ต.ค. 2024
- Don't forget to like and subscribe!
This is episode 2 in a series on tips for building better user experience for your users with poor connectivity.
In this episode, learn how to resize your images on the client-side with a canvas element so you can drastically increase the upload times of images to your app. 🚀
Image compression can really help with the performance of your app before you upload it.
Tricks like this with JavaScript always help you build faster apps.
🔗 Starter Code
github.com/cod...
🔗 Completed here:
github.com/cod...
💜 Subscribe for more videos 💜
Follow Niall Maher
💙 / nialljoemaher
💜 / nialljoemaher
💙 / nialljoemaher
💜 dev.to/nialljo...
Codú is a software development company in Dublin Ireland. To work with us reach out via our website here: www.codu.ie
#javascript #webdevelopment #code
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.
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 👀
Great tutorial, finally found a an example of working code to resize images.
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!
Very Good. I have done this before, but never really understood what was happening. Thanks, very informative.
Let's give it a try.
Men! I read it and read it, and I just couldn't get it, but your explanation was awesome.
Your really awesome it's very easy to understand as well as easy method too thank you so much👌🏼👌🏼👌🏼👌🏼
This was helpful! Appreciate you!
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 ?
This was an excellent explanation ! Please do one using libwebp / cwebp for a folder of images . I have a grandfather from Northern Ireland .
Fantastic tutorial, I like it.
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
awesome stuff bro... really added great value to my project
This is so gorgeous - can you do this on multiple images?
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?
Thank you so much! I will attempt to make an npm package based on this
Any luck?
@@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.
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.
Iam also facing the same problem... Can anybody please help...
you can't. The fileList is readonly.
Thank's brother
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.
I didn't get the part where you said "you can use multi-step upload if you're using something like AWS"
this what i need, thanks
Thank you very much, save my life!
This is awesome. Thank you
How about allowing a user to resize and a crop an image by themselves. Thank you
Hey Man, thanks a lot, one question, How do I get the srcEncoded out from the onload function. Thanks
Excellent
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.
excuse me, may I know what font and color scheme do you use sir?, it looks so charming
Amazing video Man !!!
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?
Hi man! Thanks for the video! How can I upload the new image into database? Thanks again!!
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.
I see that you have done resizing instead of compressing. Can you share some code for compressing?
I also created demo with code, if you want code then please check out our profile
great tutorial bro! thank you.
Thanks!
its a really good video, many thanks man, just need more improvement on your explanation 🔥🔥
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 :)
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 🍺
@@codu Did you make any video about this? I wanna create form with resizingimage. It will be very useful.
i tried this but it just uploads the original file size. once files[0] has a file it becomes readonly
how to upload the image has been resized to folder?
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?
Thank you so much!
Much appreciated!!!
You are welcome!
one of the best video... ❤️️
This code is good, but what about the srcEncoded image upload using php? please replay!
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. 😂
Hi, Can you please tell the type of e in the image onload function?
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
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 😄
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
Thanks mate, you just earned a subscriber
Thanks for the sub! Great to have you here 🤘
@@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?
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 😁
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
"Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported." Can you please help me on this issue
great video ... thanks....
thank u
thank you
i upload the png file so this compressed or not
I have tried but srcEcnoded is "data:," . why it is happening?
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
@nurullo sulaimonov see this! stackoverflow.com/questions/30079423/canvas-todataurl-returns-data
Is it possible create a new input name="image_thumb" filled with the resized image for submit as, and with, original image?
Hi, I' am really excited that I ran into your TH-cam. 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?
Great tutorial. But resized image looses EXIF and IPTC data.
That’s a good thing to note! I totally forgot about that as a side effect
why my output is not showing , help me please
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
Merci
Nice video!
Glad you enjoyed it, keep up the awesome work yourself 💜
You are just resizing the image ...not really compressing it ...that to implement an algorithm for example like jpeg
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?
I haven’t actually tried that, I’ll do an experiment with it 🤔
@@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.
Sir, Although ı choose a .jpg file, when ı want to save new image as, it is a .png? What shoul I do?
Could you solve it?, I have the same problem
@@yassermartinez5910 No.
ولا ولا خد قلبي يلا take my heart
Thank you!
Sorry, but this is not compress, it is a resize exactly
+
Good job bro, JESUS IS COMING BACK VERY SOON;WATCH AND PREPARE