How to make Image Resizer and compresser
with HTML,CSS and JavaScript
In my Picture Resizer and Blower device, clients can transfer a picture and resize its width and level or decrease its size. In the event that they checked the "Lock viewpoint proportion", the perspective proportion for a picture will be determined consequently and filled in the field as they begin changing width or level.
If the "Decrease quality" is checked, the picture quality will be diminished by 40%. Furthermore, last clients can download their resized pictures by tapping on the "Download Picture" button. Recall downloading pictures is likewise finished with vanilla JavaScript.
Video Tutorial of Image Resizer
Image Resizer [Source Codes]
To Create Image Resizer with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Image Resizer</title>
- <link rel="stylesheet" href="style.css">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- </head>
- <body>
- <div class="wrapper">
- <div class="upload-box">
- <input type="file" accept="image/*" hidden>
- <img src="upload-icon.svg" alt="">
- <p>Browse File to Upload</p>
- </div>
- <div class="content">
- <div class="row sizes">
- <div class="column width">
- <label>Width</label>
- <input type="number">
- </div>
- <div class="column height">
- <label>Height</label>
- <input type="number">
- </div>
- </div>
- <div class="row checkboxes">
- <div class="column ratio">
- <input type="checkbox" id="ratio" checked>
- <label for="ratio">Lock aspect ratio</label>
- </div>
- <div class="column quality">
- <input type="checkbox" id="quality">
- <label for="quality">Reduce quality</label>
- </div>
- </div>
- <button class="download-btn">Download Image</button>
- </div>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
Now paste the following codes into your style.css file
- *{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: 'Open Sans', 'Open Sans Regular', sans-serif;
- }
- body{
- display: flex;
- align-items: center;
- justify-content: center;
- min-height: 100vh;
- background: #282A35;
- }
- .wrapper{
- width: 480px;
- height: 290px;
- padding: 30px;
- background: #f2f2f2;
- border-radius: 5px;
- transition: height 0.2s ease;
- }
- .wrapper.active{
- height: 540px;
- }
- .wrapper .upload-box{
- height: 228px;
- display: flex;
- cursor: pointer;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- border-radius: 8px;
- border: 2px dashed #afafaf;
- }
- .wrapper.active .upload-box{
- border: none;
- }
- .upload-box p{
- font-size: 1.3rem;
- margin-top: 10px;
- }
- .wrapper.active .upload-box p{
- display: none;
- }
- .wrapper.active .upload-box img{
- width: 100%;
- height: 100%;
- object-fit: cover;
- border-radius: 4px;
- }
- .wrapper .content{
- opacity: 0;
- margin-top: 28px;
- pointer-events: none;
- }
- .wrapper.active .content{
- opacity: 1;
- pointer-events: auto;
- transition: opacity 0.5s 0.05s ease;
- }
- .content .row{
- display: flex;
- justify-content: space-between;
- }
- .content .row .column{
- width: calc(100% / 2 - 15px);
- }
- .row .column label{
- font-size: 1.2rem;
- }
- .sizes .column input{
- width: 100%;
- height: 45px;
- outline: none;
- margin-top: 7px;
- padding: 0 15px;
- font-size: 1.06rem;
- border-radius: 4px;
- border: 1px solid #aaa;
- }
- .sizes .column input:focus{
- padding: 0 14px;
- border: 2px solid #1DADEF;
- }
- .content .checkboxes{
- margin-top: 20px;
- }
- .checkboxes .column{
- display: flex;
- align-items: center;
- }
- .checkboxes .column input{
- width: 17px;
- height: 17px;
- margin-right: 9px;
- accent-color: #1DADEF;
- }
- .content .download-btn{
- width: 100%;
- color: #fff;
- outline: none;
- border: none;
- cursor: pointer;
- font-size: 1.06rem;
- border-radius: 5px;
- padding: 15px 0;
- margin: 30px 0 10px;
- background: #1DADEF;
- text-transform: uppercase;
- }
Now paste the following codes into your script.js file
- const uploadBox = document.querySelector(".upload-box"),
- previewImg = uploadBox.querySelector("img"),
- fileInput = uploadBox.querySelector("input"),
- widthInput = document.querySelector(".width input"),
- heightInput = document.querySelector(".height input"),
- ratioInput = document.querySelector(".ratio input"),
- qualityInput = document.querySelector(".quality input"),
- downloadBtn = document.querySelector(".download-btn");
-
- let ogImageRatio;
-
- const loadFile = (e) => {
- const file = e.target.files[0];
- if(!file) return;
- previewImg.src = URL.createObjectURL(file);
- previewImg.addEventListener("load", () => {
- widthInput.value = previewImg.naturalWidth;
- heightInput.value = previewImg.naturalHeight;
- ogImageRatio = previewImg.naturalWidth / previewImg.naturalHeight;
- document.querySelector(".wrapper").classList.add("active");
- });
- }
-
- widthInput.addEventListener("keyup", () => {
- const height = ratioInput.checked ? widthInput.value / ogImageRatio : heightInput.value;
- heightInput.value = Math.floor(height);
- });
-
- heightInput.addEventListener("keyup", () => {
-
- const width = ratioInput.checked ? heightInput.value * ogImageRatio : widthInput.value;
- widthInput.value = Math.floor(width);
- });
-
- const resizeAndDownload = () => {
- const canvas = document.createElement("canvas");
- const a = document.createElement("a");
- const ctx = canvas.getContext("2d");
-
- const imgQuality = qualityInput.checked ? 0.5 : 1.0;
-
- canvas.width = widthInput.value;
- canvas.height = heightInput.value;
-
- ctx.drawImage(previewImg, 0, 0, canvas.width, canvas.height);
-
- a.href = canvas.toDataURL("image/jpeg", imgQuality);
- a.download = new Date().getTime();
- a.click();
- }
-
- downloadBtn.addEventListener("click", resizeAndDownload);
- fileInput.addEventListener("change", loadFile);
- uploadBox.addEventListener("click", () => fileInput.click());
If you face any difficulties while creating your Image Resizer or your code is not working as expected, you can download the source code files by clicking download button.