آموزش طراحی تغییر اندازه و فشرده سازی تصاویر در HTML CSS و جاوا اسکریپت

نویسنده:
بازدید: 47 بازدید

آیا می‌دانستید که با استفاده از جاوا اسکریپت می‌توانید ابعاد تصویر (عرض و ارتفاع) را تغییر دهید و اندازه آن‌ها را با کاهش کیفیت در قسمت جلویی فشرده سازی کنید؟ اگر پاسخ شما منفی است، این وبلاگ برای شما نوشته شده است.

امروز، در این وبلاگ، نحوه تغییر اندازه و فشرده سازی تصاویر در HTML CSS و جاوا اسکریپت را از ابتدا یاد خواهید گرفت. من معتقدم اگر از قبل دانش اولیه جاوا اسکریپت داشته باشید، درک کدها و منطق پشت تغییر اندازه تصاویر پیچیده نخواهد بود.

در ابزار Image Resizer & Compressor من، کاربران می توانند یک تصویر را آپلود کنند و اندازه عرض و ارتفاع آن را تغییر دهند یا اندازه آن را کاهش دهند. اگر «نسبت قفل قفل» را بررسی کنند، نسبت تصویر برای یک تصویر به طور خودکار محاسبه می‌شود و با شروع تغییر عرض یا ارتفاع، در فیلد پر می‌شود.

اگر “کاهش کیفیت” علامت زده شود، کیفیت تصویر تا 40٪ کاهش می یابد. و آخرین کاربران می توانند تصاویر تغییر اندازه خود را با کلیک بر روی دکمه “دانلود تصویر” دانلود کنند. به یاد داشته باشید که دانلود تصاویر نیز با جاوا اسکریپت وانیلی انجام می شود.

اگر مشتاقید بدانید این تغییر اندازه‌دهنده تصویر چگونه به نظر می‌رسد، می‌توانید اینجا را کلیک کنید تا یک نسخه نمایشی زنده از آن را مشاهده کنید و سعی کنید اندازه تصویر خود را تغییر دهید. اما، اگر می خواهید یک آموزش ویدیویی کامل از این پروژه تغییر اندازه و فشرده سازی تصاویر را ببینید، می توانید ویدیوی یوتیوب داده شده را تماشا کنید.

آموزش تصویری تغییر اندازه و فشرده سازی تصاویر در جاوا اسکریپت

امیدوارم نسخه نمایشی Image Resizer را دوست داشته باشید و متوجه شده باشید که چگونه آن را با استفاده از HTML CSS و جاوا اسکریپت ساخته ام. در این ویدئو، مشاهده کردید که من از هیچ کتابخانه خارجی برای تغییر اندازه، فشرده سازی و دانلود یک تصویر استفاده نکردم. همه اینها با جاوا اسکریپت و با استفاده از بوم انجام می شود.

اگر ویدیو را تماشا نکردید و می‌خواهید آن را رد کنید، می‌توانید آن را رد کنید. اما به یاد داشته باشید که این ابزار تغییر اندازه تصویر با استفاده از بوم جاوا اسکریپت و روش‌های مختلف آن مانند getContext، drawImage، toDataURL و غیره ساخته شده است که اگر فقط کدها را کپی-پیست کنید، درک آن برای شما دشوار خواهد بود.

بنابراین، پیشنهاد می‌کنم ویدیو را ببینید و سعی کنید کدها، روش‌ها و منطق آن را به درستی درک کنید. اگر این کار را انجام دهید، به شما کمک می کند تا سردرگمی خود را در حین ایجاد مجدد این تغییر اندازه دهنده تصویر توسط خودتان یا استفاده از کدهای آن در پروژه های دیگر خود برطرف کنید. اگر پروژه‌های جاوا اسکریپت مبتنی بر بوم بیشتری می‌خواهید، می‌توانید ویرایشگر تصویر، گرفتن اسکرین‌شات، برنامه طراحی و غیره را ببینید.

برای دریافت کدهای منبع یا فایل های این پروژه تغییر اندازه و فشرده سازی تصویر، می توانید به راحتی آنها را از پایین این پست وبلاگ دریافت کنید.

تغییر اندازه و فشرده سازی تصاویر در جاوا اسکریپت

برای ایجاد تغییر اندازه و کمپرسور تصویر با استفاده از HTML CSS و جاوا اسکریپت، مراحل داده شده را خط به خط دنبال کنید:

  • یک پوشه ایجاد کنید. می توانید هر نامی از این پوشه قرار دهید و فایل های زیر را در داخل این پوشه ایجاد کنید.
  • یک فایل index.html ایجاد کنید. نام فایل باید index و پسوند آن .html باشد.
  • یک فایل style.css ایجاد کنید. نام فایل باید style و پسوند آن .css باشد.
  • یک فایل script.js ایجاد کنید. نام فایل باید اسکریپت و پسوند آن .js باشد.

ابتدا کدهای زیر را در فایل index.html خود قرار دهید.

<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Image Resizer JavaScript | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="wrapper">
      <div class="upload-box">
        <input type="file" accept="image/*" hidden>
        <img src="https://www.codingnepalweb.com/demos/resize-and-compress-image-javascript/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>

  </body>
</html>

دوم، کدهای زیر را در فایل style.css خود قرار دهید.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #927DFC;
}
.wrapper{
  width: 450px;
  height: 288px;
  padding: 30px;
  background: #fff;
  border-radius: 9px;
  transition: height 0.2s ease;
}
.wrapper.active{
  height: 537px;
}
.wrapper .upload-box{
  height: 225px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 5px;
  border: 2px dashed #afafaf;
}
.wrapper.active .upload-box{
  border: none;
}
.upload-box p{
  font-size: 1.06rem;
  margin-top: 20px;
}
.wrapper.active .upload-box p{
  display: none;
}
.wrapper.active .upload-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.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.06rem;
}
.sizes .column input{
  width: 100%;
  height: 49px;
  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 #927DFC;
}
.content .checkboxes{
  margin-top: 20px;
}
.checkboxes .column{
  display: flex;
  align-items: center;
}
.checkboxes .column input{
  width: 17px;
  height: 17px;
  margin-right: 9px;
  accent-color: #927DFC;
}
.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: #927DFC;
  text-transform: uppercase;
}

در آخر، کدهای زیر را در فایل script.js خود قرار دهید.

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]; // getting first user selected file
    if(!file) return; // return if user hasn't selected any file
    previewImg.src = URL.createObjectURL(file); // passing selected file url to preview img src
    previewImg.addEventListener("load", () => { // once img loaded
        widthInput.value = previewImg.naturalWidth;
        heightInput.value = previewImg.naturalHeight;
        ogImageRatio = previewImg.naturalWidth / previewImg.naturalHeight;
        document.querySelector(".wrapper").classList.add("active");
    });
}

widthInput.addEventListener("keyup", () => {
    // getting height according to the ratio checkbox status
    const height = ratioInput.checked ? widthInput.value / ogImageRatio : heightInput.value;
    heightInput.value = Math.floor(height);
});

heightInput.addEventListener("keyup", () => {
    // getting width according to the ratio checkbox status
    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");

    // if quality checkbox is checked, pass 0.5 to imgQuality else pass 1.0
    // 1.0 is 100% quality where 0.5 is 50% of total. you can pass from 0.1 - 1.0
    const imgQuality = qualityInput.checked ? 0.5 : 1.0;

    // setting canvas height & width according to the input values
    canvas.width = widthInput.value;
    canvas.height = heightInput.value;

    // drawing user selected image onto the canvas
    ctx.drawImage(previewImg, 0, 0, canvas.width, canvas.height);
    
    // passing canvas data url as href value of <a> element
    a.href = canvas.toDataURL("image/jpeg", imgQuality);
    a.download = new Date().getTime(); // passing current time as download value
    a.click(); // clicking <a> element so the file download
}

downloadBtn.addEventListener("click", resizeAndDownload);
fileInput.addEventListener("change", loadFile);
uploadBox.addEventListener("click", () => fileInput.click());

این همه است، اکنون شما با موفقیت پروژه ای در مورد تغییر اندازه و فشرده سازی تصاویر در HTML CSS و جاوا اسکریپت ایجاد کرده اید. اگر کد شما کار نمی کند یا با مشکلی مواجه شده اید، لطفا فایل های کد منبع را از دکمه دانلود داده شده دانلود کنید. این رایگان است و یک فایل فشرده دانلود می شود که حاوی پوشه پروژه با فایل های کد منبع است.