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 👀
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!
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 ?
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.
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?
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.
How can i upload this compressed image file on server ??
2 роки тому
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 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.
Hi, I' am really excited that I ran into your UA-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?
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 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?
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
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. 😂
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?
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 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.
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
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
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
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!
This was helpful! Appreciate you!
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
Very Good. I have done this before, but never really understood what was happening. Thanks, very informative.
Your really awesome it's very easy to understand as well as easy method too thank you so much👌🏼👌🏼👌🏼👌🏼
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.
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 ?
Hi man! Thanks for the video! How can I upload the new image into database? Thanks again!!
This is so gorgeous - can you do this on multiple images?
excuse me, may I know what font and color scheme do you use sir?, it looks so charming
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.
Fantastic tutorial, I like it.
Hey Man, thanks a lot, one question, How do I get the srcEncoded out from the onload function. Thanks
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?
this what i need, thanks
awesome stuff bro... really added great value to my project
This was an excellent explanation ! Please do one using libwebp / cwebp for a folder of images . I have a grandfather from Northern Ireland .
This is awesome. Thank you
How about allowing a user to resize and a crop an image by themselves. Thank you
Thank's brother
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! 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.
Excellent
Amazing video Man !!!
Thank you very much, save my life!
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.
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.
Hi, Can you please tell the type of e in the image onload function?
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.
great tutorial bro! thank you.
Thanks!
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.
Hi, I' am really excited that I ran into your UA-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?
I didn't get the part where you said "you can use multi-step upload if you're using something like AWS"
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 😄
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
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. 😂
one of the best video... ❤️️
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 u
Thank you so much!
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
Much appreciated!!!
You are welcome!
great video ... thanks....
thank you
its a really good video, many thanks man, just need more improvement on your explanation 🔥🔥
Is it possible create a new input name="image_thumb" filled with the resized image for submit as, and with, original image?
i upload the png file so this compressed or not
how to upload the image has been resized to folder?
Merci
"Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported." Can you please help me on this issue
Nice video!
Glad you enjoyed it, keep up the awesome work yourself 💜
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.
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
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
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
Sorry, but this is not compress, it is a resize exactly
i tried this but it just uploads the original file size. once files[0] has a file it becomes readonly
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
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!
why my output is not showing , help me please
You are just resizing the image ...not really compressing it ...that to implement an algorithm for example like jpeg
+
Good job bro, JESUS IS COMING BACK VERY SOON;WATCH AND PREPARE