Resize and Compress Images in HTML CSS & JavaScript | Resize Image in JavaScript
HTML-код
- Опубликовано: 13 июн 2024
- In this video, I've shown how to Resize and Compress Images using HTML CSS & JavaScript. In this image resize tool, the user can upload an image and resize its dimensions or compress its size by reducing the image quality.
After watching the video, you'll know how to resize and compress the image on the front end by using vanilla JavaScript.
Live Demo or Download Codes of this Image Resizer & Compressor
www.codingnepalweb.com/demos/...
Timestamps:
0:00 Demo of this project
1:52 HTML & CSS start
10:57 JavaScript start
12:44 Previewing selected image
16:39 Showing width & height of an image
18:14 Working on width & height inputs
21:17 Working on resizing & downloading an image
Second Channel - bit.ly/3aHNkru
Website: www.codingnepalweb.com
Facebook - / coding.np
Instagram - / coding.np
Music Credit:
Deep Sea by Vendredi
• Deep Sea - Vendredi (N...
Something 'bout July (Instrumental) by RYYZN
• Something 'bout July (...
Ikson - We Are Free [Official]
• #83 We Are Free (Offic...
After watching this video, you'll know how to resize and compress the image on the front end by using vanilla JavaScript.
Don't forget to check out the live demo of this Image Resizer. Link is in the description!
Any thaugts about how to design and create UI Kits using bootstrap, but a beautifull one
You are really very skilled in JavaScript..
Thank you so much sir..
Keep uploading JavaScript video.
Love from india 🇮🇳
Thank you, I will
What a cool process, i really liked it. Thanks a lot!
Glad you liked it!
Thanks for this tutorial sir...
Very Awesome This is perfect!
Glad you think so!
Great Work bro as always
Thanks again
This tutorial is amazing thank you
You're very welcome!
wow amazing,I thought you were using the API, but you weren't. You're just using pure Javascript.
wow awesome 👍This is a motivation for me who is a beginner
Yes, my 99.9% JavaScript videos are created with vanilla JavaScript. Don't forget to checkout the playlist: ruclips.net/p/PLpwngcHZlPadhRwryAXw3mJWX5KH3T5L3
@@CodingNepal yes that's true and soo good
Good! Very good!
Thank you
Thank you!
You're welcome!
Awesome ❤️❤️
Thanks
Nice
Super bro
Thanks
Your coding skills are really excellent. Can you make a video on how to make a youtube video downloader website like y2mate?
Use python 👍
I don't think RUclips will allow me to upload video on this topic.
@@CodingNepal we can not use the same logic to do that ??
Can you make add cm inches and format jpg in this project so that we download on the basis of these setting
I think reducing doesnt work. I have tried from the link you shared and it's not working. Can you check out please? Thank you.
How can we custom crop images before uploading
Why did you only declare the first constant with "const", but the following ones did not?
Great
Thanks
I want any size compressor please make it .. like 5 mb img convert 20kb instant
Pls give the github link or code for the above project
how can i add java ??
BTW THX FOR HELP
YOU DA BEST😀
No oculta input file con atributo hidden
🚀🚀🚀
Can you share the github link please?
I want the image file to be compressed before uploading it to the server. Can this be done?
Yes, you can compress image on the front end by using JavaScript and later you can send it to the server. In this video, I've shown it, but instead of downloading, you can send it to the server.
If you don't know how to upload file to the server.. Here is the video: ruclips.net/video/_xDCVt1F6O0/видео.html
@@CodingNepal I will wait for you to upload the this code.
How can we make file downloading progress bar in javascript
Here is the video ruclips.net/video/_xDCVt1F6O0/видео.html
@@CodingNepal No , sir i know this but i want how to show progress bar when I'm downloading some files from server
Create a Working Contact Form in HTML CSS JavaScript & PHP not working
Your message has been sent but, when I check my gmail there is no email
Please read the blog and the comment section of that topic. You may find your solution there.
19:49
the code is not on the webpage
It's uploaded. Get source codes from here: www.codingnepalweb.com/resize-and-compress-images-javascript/
Source code link please
Get source codes from here: www.codingnepalweb.com/resize-and-compress-images-javascript/
And if I want to save with the original name of the image, what do I have to omit?
Follow the given steps to do it:
1. Replace this line let ogImageRatio; with this let ogImageRatio, ogImageName;
2. Inside previewImg onload function add this line: ogImageName = file.name.replace(/\.[^/.]+$/, "");
3. Last, instead of new Date().getTime(); pass the ogImageName as a.download value
We're creating ogImageName global variable and passing original filename to ogImageName. And last passing the ogImageName as a.download value.
ye dekhene ke baad aise lag rha hai ki - mujhe toh kuch bhi nhi aata java script main
koi suggest karo yaar kya dekhu java script strong krne ke liye
tutorial dekh liya voh mat bolana
thankyou
Don't lose hope. I recommend you to read MDN documentation and try to create different projects by yourself: developer.mozilla.org/en-US/docs/Web/JavaScript
You couldn't have made this at a better time. Looking to build a project similar to screely.c
Nice
Thanks