Memperbesar dan memperkecil gambar dengan javascript

Kali ini saya akan berbagi mengenai cara memperbesar dan memperkecil gambar dengan javascript . Jadi kali ini kita akan mengetahui cara memanipulasi gambar . Kali ini kita akan memanipulasi ukuran gambarnya, misalnya kita mempunyai tombol untuk memperbesar dan memperkecil gambar menggunakan javascript . biar lebih penasaran ini dia gambar programnya

Baca juga Apa itu Ajax

Baik pertama tama yang kita lakukan adalah mengiapkan photonya dulu, kalo saya ambil dari url saja biar cepet . Baik jika sudah kita buat dulu htmlnya .

    <div class="pembungkus">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCcPU9Ph9023sMhHoXLb2mFp7UxOvYeEEilB71wWinplRCQ-OCdFuRrEP-zsPAFndDKpKYYksUL1Aa09u8ELWcXXe4cDCmIX-u5fx-WPnyZX8Ha4WTEpceE9OM6LKhN0Hpx7ye64zyzYjm/s1600/js1_0.png"
      id="gambar" />
      <div class="posisi pembungkus2">
      <p onclick="perbesar();">+</p>
      <p onclick="perkecil();">-</p>
      <p onclick="awal();">awal</p>
      </div>
      <div class="posisi pembungkus3">
 <p>Logo Javascript</p>
       </div>
     </div>

Baik tampilan awalnya sangat sederhana sekalikan, agar lebih menarik kita tambah saja css .

    <style>
    .pembungkus{
      position: relative;
      width: 200px;
      height: 200px;
    }
    .pembungkus img{
      width: 100%;
      height: 100%;
      transition: width 1s,height 1s;
    }
.posisi{
      position: absolute;
      color: #000;
      font-size: 20px;
      background-color: rgba(232, 178, 32, 0.5);
      display: none;
}
    .pembungkus2{
      top: 0;
      width: 50px;
      height: 150px;
      text-align: center;
    }

    .pembungkus3{
      position: absolute;
      top: 100%;
      left: 0;
      width: 204px;
      height: 50px;
      text-align: center;
    }
    .pembungkus:hover .posisi{
      display: block;
      cursor: pointer;
    }
    </style>

Stylenya hanya mengatur posisi saja dan menambahkan background. Saya tidak akan membahas tentang css kali ini karena css udah di bahas oleh saya di artikel kategori css .Sekarang kita membuat javascriptnya

<script language="javascript">
<!--
    var ukuran = 100;
function ukuranGambar(ukuran){
       var gammbar = document.getElementById('gambar');
        gammbar.style.width = ukuran+"%";
        gammbar.style.height = ukuran+"%";
}
      function perbesar(){
        ukuran = ukuran + 20;
        if(ukuran>=200){
          ukuran=200;
        }
ukuranGambar(ukuran);
      }
      function perkecil() {
          ukuran = ukuran - 20;
          if(ukuran<=100){
            ukuran=100;
          }
 ukuranGambar(ukuran);
        }
        function awal() {
ukuranGambar(100);
        }
//>
    </script>

Baca juga fungsi pada javascript

Dan membuat memanipulasi gambarpun selesai . Baik saya akan jelaskan algoritmanya . Misal user mengklik +, maka akan melakukan fungsi perbesar yang melalukan penjumlahan ukuran

ukuran = ukuran + 20;

Setelah melakukan penjumlahan ukuran maka akan ada pemilahan jika ukuranya lebih besar atau sama dengan 200 maka ukurannya tetap 200 . 

          if(ukuran<=100){
            ukuran=100;
          }

Baca juga percabangan pada javascript

Setelah itu akan melakukan fungsi ukurangGambar dan mengoper varible ukuranya  ukuranGambar(ukuran); . Setelah itu kita simpan id gambar kedalam variable .

var gammbar = document.getElementById('gambar');

Jadi untuk mendapatkan id kita metulis document.getElementById('NamaIdNya') . Setelah itu maka akan ada perubahan ukuran gambar di sesuaikan dengan variable ukurannya

        gammbar.style.width = ukuran+"%";
        gammbar.style.height = ukuran+"%";

Baca juga operator pada javascript

Jadi untuk mengset ukuran, kita dengan gammbar.style.width . Bisa juga gammbar.style.color=red atau apalah yang ada di css .

Itu di cara memanipulasi gambar dengan javascript, semoga bermanfaat dan sampai jumpa .

Download scriptnya 

Bagikan Artikel ini