Zmiana wymiarów zdjęć

Prosty gadżet do zmiany wymiarów fotek.

Możesz zmienić rozmiar obrazu (szerokość i wysokość) oraz skompresować ich rozmiar, zmniejszając jakość zdjęcia.

Jeśli zaznaczysz opcję „Zablokuj współczynnik proporcji”, współczynnik proporcji zostanie obliczony automatycznie.

Jeżeli zaznaczona jest opcja „Obniż jakość”, jakość obrazu zostanie obniżona o 40%. Pobierzesz obraz klikając przycisk „Pobierz obraz”. To wszystko 🙂

Poniżej znajdziesz kody jak wstawić go na stronę.

Wybierz zdjęcie do przesłania

Szerokość

Wysokość

Zablokuj proporcje

Zmniejsz jakość

Kody na stronę

Jak wstawić gadżet na własną stronę?

Można ręcznie, lub pobrać gotowca.

Tworzymy odpowiednie pliki w nowym folderze:

index.html
style.css
script.js

I wklejamy poniższe kody. Należy pobrać osobno plik upload-icon.svg i rozpakować go w tym samym folderze.

index.html

<!DOCTYPE html>
<html lang="pl" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Zmiana rozmiarów dla obrazów | Skrip</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="upload-icon.svg" alt="">
        <p>Wybierz plik do przesłania</p>
      </div>
      <div class="content">
        <div class="row sizes">
          <div class="column width">
            <label>Szerokość</label>
            <input type="number">
          </div>
          <div class="column height">
            <label>Wysokość</label>
            <input type="number">
          </div>
        </div>
        <div class="row checkboxes">
          <div class="column ratio">
            <input type="checkbox" id="ratio" checked>
            <label for="ratio">Zablokuj proporcje</label>
          </div>
          <div class="column quality">
            <input type="checkbox" id="quality">
            <label for="quality">Zmniejsz jakość</label>
          </div>
        </div>
        <button class="download-btn">Pobierz gotowe zdjęcie</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: #fff;
}
.wrapper{
  width: 450px;
  height: 288px;
  padding: 30px;
  background: #fafafa;
  border-radius: 9px;
  border: 1px solid #eaeaea;
  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: #18191b;
}
.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: #18191b;
  text-transform: uppercase;
}

script.js

// JavaScript Document
// www.skrip.pl
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());

Top Stories

Jak nie zostać ofiarą oszustów. Sposób na rozpoznanie fałszywego maila

Wangiri scam – jak nie zostać ofiarą

Statystyki wyszukiwarki PornHub za 2024 rok

Zmień wymiary zdjęcia online. Gadżet na stronę

Prosty gadżet do zmiany wymiarów fotek.

Zmiana wymiarów zdjęć

Kody na stronę

Jak wstawić gadżet na własną stronę?

index.html

style.css

script.js

Lub pobierz gotowca.

Chmurka tagów

Zaprzyjaźniona strona

Najczęściej oglądane wpisy