Fotoğrafları Yeniden Boyutlandır #6 | HTML & CSS

Ogehan

Asistan Moderatör
5 Haz 2016
2,082
188
</>
Sizlere bugün kodladığım, programa gerek kalmadan kendinizin yapıcağı bir
"Fotoğraf Boyutlandırma" Projesi oluşturduk.

Yüklediğimiz fotoğrafın boyutunu istediğimiz bir boyuta dönüştürebiliyoruz.
Bunuda çok kısa ve etkili bir şekilde bu projemiz ile yapıyoruz.



İlk öncelikle fotoğrafımızı ikona tıklayarak yüklüyoruz.




Fotoğrafımızı yükledikten sonra boyutlandırmak istediğimiz değerleri giriyoruz.





Orjinali
1920x1080 olan fotoğrafımızı 1000x1000x yapıyoruz.





Gördüğünüz şekilde kısa sürede
indirerek istediğimiz değerlerde elimize ulaşıyor.





Kaynak kodlarımız aşağıdaki bulunduğu gibidir ;


HTML
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <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>Dosya Seçiniz </p>
    </div>
    <div class="content">
      <div class="row sizes">
        <div class="column width">
          <label>Genişlik</label>
          <input type="number">
        </div>
        <div class="column height">
          <label>Yükseklik</label>
          <input type="number">
        </div>
      </div>
      <button class="download-btn">İndirs</button>
    </div>
  </div>

  <script>
    const uploadBox = document.querySelector(".upload-box"),
      previewImg = uploadBox.querySelector("img"),
      fileInput = uploadBox.querySelector("input"),
      widthInput = document.querySelector(".width input"),
      heightInput = document.querySelector(".height input"),
      downloadBtn = document.querySelector(".download-btn");

    uploadBox.addEventListener("click", () => fileInput.click());

    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;
        document.querySelector(".wrapper").classList.add("active");
      });
    }

    const resizeAndDownload = () => {
      const canvas = document.createElement("canvas");
      const a = document.createElement("a");
      const ctx = canvas.getContext("2d");

      canvas.width = widthInput.value;
      canvas.height = heightInput.value;

      ctx.drawImage(previewImg, 0, 0, canvas.width, canvas.height);

      a.href = canvas.toDataURL("image/jpeg", 1);
      a.download = new Date().getTime();
      a.click();
    }

    downloadBtn.addEventListener("click", resizeAndDownload);
    fileInput.addEventListener("change", loadFile);
  </script>

</body>

</html>


Css
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-image: url(1.jpg);
}
.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 #00e7ff;
}
.content .checkboxes{
  margin-top: 20px;
}
.checkboxes .column{
  display: flex;
  align-items: center;
}
.checkboxes .column input{
  width: 17px;
  height: 17px;
  margin-right: 9px;
  accent-color: #00e7ff;
}
.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: #00e7ff;
  text-transform: uppercase;
}

Hergün açtığım web programlama ile ilgili konular ve bir web sitesi kurmak için basit ve
etkili
temelleri size gösteriyorum.
Temellerimiz bittikten sonra en son
proje olarak adım adım baştan nasıl
web sitesi yapılacağı ile ilgili olucaktır.
İyi forumlar dilerim:)
 

'Anka

Basın&Medya Ekibi Kıdemli
8 Eyl 2021
3,385
2,578
Kullanmayı çok isterim. Deneyeceğim, eline sağlık.
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.