Membuat Script Mengubah Ukuran Gambar Dengan Javascript

14 Sep 2015 00:55 • Post By

Pada artikel kali ini, saya akan mencoba menjelaskan bagaimana teknik membuat script mengubah ukuran image dengan DOM di Javascript. Hal ini pernah saya jadikan tugas bagi mahasiswa saya yang mengambil matakuliah pemrograman web. Tapi sudah lama kok.

OK… Karena menggunakan Javascript, sehingga dalam hal ini prosesnya tidak perlu melalui request ke server namun hanya terjadi dalam client saja. Oleh karena itu proses resizing image ini dapat dilakukan dengan cepat.
Hmm… adapun skenario mengubah ukuran imagenya sebagai berikut. Dalam halaman web muncul sebuah image, kemudian terdapat 3 buah tombol atau button. Tombol pertama (+) digunakan untuk memperbesar ukuran image menjadi 2 kali sebelumnya. Tombol kedua (-) untuk memperkecil ukuran image 1/2 kali sebelumnya, dan tombol ketiga (=) untuk mereset ukuran image menjadi ukuran aslinya.

Berikut ini screen shot tampilan halaman web nya:

Photobucket

Tampilan di atas adalah tampilan image mula-mula (ukuran asli). Selanjutnya apabila tombol (+) diklik maka akan muncul image dengan besar 2 kali sebelumnya (lihat gambar di bawah).

Photobucket

Sedangkan apabila tombol (-) diklik maka image akan berukuran 1/2 kali sebelumnya.

Photobucket

Perlu diketahui bahwa, image yang yang tampil tersebut berasal dari sebuah file image yang sama. Perubahannya hanya pada size nya saja.

OK.. bagaimana teknik pembuatannya?


  Ubah Size Image








  

Sampel Script Mengubah Size Gambar

Logo UNS



Selanjutnya, untuk proses pengubahan atau perhitungan ukuran image kita harus mendapatkan ukuran asli (width dan height) dari image terlebih dahulu. Untuk mendapatkan ukuran panjang (width) image, kita gunakan perintah DOM di Javascript

document.getElementByID("gambar").width;
dan lebar atau tinggi imagenya kita gunakan perintah

document.getElementByID("gambar").height;
Kedua perintah tersebut kita jalankan begitu halaman web diload oleh browser (diberikan pada event onload)



  Ubah Size Image



var panjang;
var lebar;

function bacaUkuran()
{
  panjang = document.getElementById("gambar").width;
  lebar = document.getElementById("gambar").height;
}










  

Sampel Script Mengubah Size Gambar

Logo UNS



Perhatikan Javascript di atas, bahwa variabel panjang dan lebar sengaja dibuat sebagai variabel global karena nantinya akan digunakan dalam proses perhitungan untuk setiap proses (perbesar ukuran dan perkecil ukuran). Apabila kedua variabel tersebut dibuat lokal dalam function bacaUkuran() maka nilai-nilainya hanya bisa dikenal dalam function tersebut saja. Sehingga deklarasi variabel panjang dan lebar
tidak seperti berikut ini :

function bacaUkuran()
{
  var panjang;
  var lebar;
  panjang = document.getElementById("gambar").width;
  lebar = document.getElementById("gambar").height;
}
Selanjutnya kita akan membuat script untuk memperbesar ukuran terlebih dahulu. Bagaimana idenya? Misalkan mula-mula panjang imagenya adalah x. Setelah diperbesar 2 kali maka panjang imagenya adalah 2x. Bila diperbesar lagi maka panjang imagenya menjadi 4x, dst. Secara umum panjang image setelah diperbesar n kali adalah 2nx. Bila n = 0, maka akan diperoleh panjang image mula-mula. Hal yang sama juga berlaku untuk lebar imagenya. Nah… ide ini bisa kita terapkan dalam bentuk script.



  Ubah Size Image



var panjang;
var lebar;
var n = 0;

function bacaUkuran()
{
  panjang = document.getElementById("gambar").width;
  lebar = document.getElementById("gambar").height;
}

function tambahSize()
{
  n++;
  document.getElementById("gambar").width = Math.pow(2, n) * panjang;
  document.getElementById("gambar").height = Math.pow(2, n) * lebar;
}










  

Sampel Script Mengubah Size Gambar

Logo UNS




Keterangan:
Perintah Math.pow(2, n) digunakan untuk menghitung 2n pada Javascript. Perintah document.getElementById("gambar").width = Math.pow(2, n) * panjang; digunakan untuk mengubah panjang image yang tampil dalam browser menjadi 2n * panjang aslinya.

Sedangkan untuk memperkecil ukuran image, kita cukup melakukan decrement pada variabel n nya saja (n--). Misal mula-mula panjang image adalah x (20x) pixel, lalu diperbesar menjadi 2x (20+1x = 21x), lalu diperbesar lagi menjadi 4x (21+1x = 22x). Selanjutnya diperkecil, maka panjangnya menjadi kembali ke 2x (22-1x = 21x). Bila diperkecil lagi menjadi x (21-1x = 20x), dan bila diperkecil lagi menjadi 1/2 x (20 – 1x = 2-1x) dst.

Dengan ide di atas maka Javascript untuk memperkecil ukuran adalah:



  Ubah Size Image



var panjang;
var lebar;
var n = 0;

function bacaUkuran()
{
  panjang = document.getElementById("gambar").width;
  lebar = document.getElementById("gambar").height;
}

function tambahSize()
{
  n++;
  document.getElementById("gambar").width = Math.pow(2, n) * panjang;
  document.getElementById("gambar").height = Math.pow(2, n) * lebar;
}

function kurangiSize()
{
  n--;
  document.getElementById("gambar").width = Math.pow(2, n) * panjang;
  document.getElementById("gambar").height = Math.pow(2, n) * lebar;
}










  

Sampel Script Mengubah Size Gambar

Logo UNS



Yang terakhir, untuk tombol ketiga (=) dimana bila tombol ini ukuran image akan direset menjadi ukuran aslinya. Idenya adalah dengan memberi nilai n = 0, untuk mendapatkan panjang dan lebar image aslinya. Bila nilai n = 0, dan panjang image aslinya x, maka 20x = x (sama seperti ukuran aslinya). Demikian pula untuk lebarnya.



  Ubah Size Image



var panjang;
var lebar;
var n = 0;

function bacaUkuran()
{
  panjang = document.getElementById("gambar").width;
  lebar = document.getElementById("gambar").height;
}

function tambahSize()
{
  n++;
  document.getElementById("gambar").width = Math.pow(2, n) * panjang;
  document.getElementById("gambar").height = Math.pow(2, n) * lebar;
}

function kurangiSize()
{
  n--;
  document.getElementById("gambar").width = Math.pow(2, n) * panjang;
  document.getElementById("gambar").height = Math.pow(2, n) * lebar;
}

function resetSize()
{
  n = 0;
  document.getElementById("gambar").width = Math.pow(2, n) * panjang;
  document.getElementById("gambar").height = Math.pow(2, n) * lebar;
}










  

Sampel Script Mengubah Size Gambar

Logo UNS



Asyik dan mudah bukan membuatnya? Nah… silakan Anda berkreasi sendiri menggunakan image yang lain. Atau mungkin… Anda kembangkan ke font size. Bagaimana bila font nya yang diubah-ubah ukurannya seperti halnya image di atas.

Jangan lupa Subscribe ya !!

Membuat Script Mengubah Ukuran Gambar Dengan Javascript | Tutorialku.Net | 4.5