Tuesday, May 14, 2013

Teknik Membuat Script Mengubah Ukuran Image dengan Javascript

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?
Pertama kita siapkan halaman webnya yang di dalamnya terdapat image dan 3 buah buttonnya.
view sourceprint?
01.<html>
02.<head>
03.<title>Ubah Size Image</title>
04.</head>
05.<body>
06.<div align="center">
07.<h1>Sampel Script Mengubah Size Gambar</h1>
08.<h2>Logo UNS</h2>
09.<input type="button" value="-" />
10.<input type="button" value="=" />
11.<input type="button" value="+" /><br /><br />
12.<img id="gambar" src="uns.gif" />
13.</div>
14.</body>
15.</html>
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
view sourceprint?
1.document.getElementByID("gambar").width;
dan lebar atau tinggi imagenya kita gunakan perintah
view sourceprint?
1.document.getElementByID("gambar").height;
Kedua perintah tersebut kita jalankan begitu halaman web diload oleh browser (diberikan pada event onload)
view sourceprint?
01.<html>
02.<head>
03.<title>Ubah Size Image</title>
04. 
05.<script type="text/javascript">
06. 
07.var panjang;
08.var lebar;
09. 
10.function bacaUkuran()
11.{
12.panjang = document.getElementById("gambar").width;
13.lebar = document.getElementById("gambar").height;
14.}
15. 
16.</script>
17.</head>
18.<body onload="bacaUkuran()">
19.<div align="center">
20.<h1>Sampel Script Mengubah Size Gambar</h1>
21.<h2>Logo UNS</h2>
22.<input type="button" value="-" />
23.<input type="button" value="=" />
24.<input type="button" value="+" /><br /><br />
25.<img id="gambar" src="uns.gif" />
26.</div>
27.</body>
28.</html>
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 :
view sourceprint?
1.function bacaUkuran()
2.{
3.var panjang;
4.var lebar;
5.panjang = document.getElementById("gambar").width;
6.lebar = document.getElementById("gambar").height;
7.}
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.
view sourceprint?
01.<html>
02.<head>
03.<title>Ubah Size Image</title>
04. 
05.<script type="text/javascript">
06. 
07.var panjang;
08.var lebar;
09.var n = 0;
10. 
11.function bacaUkuran()
12.{
13.panjang = document.getElementById("gambar").width;
14.lebar = document.getElementById("gambar").height;
15.}
16. 
17.function tambahSize()
18.{
19.n++;
20.document.getElementById("gambar").width = Math.pow(2, n) * panjang;
21.document.getElementById("gambar").height = Math.pow(2, n) * lebar;
22.}
23. 
24.</script>
25.</head>
26.<body onload="bacaUkuran()">
27.<div align="center">
28.<h1>Sampel Script Mengubah Size Gambar</h1>
29.<h2>Logo UNS</h2>
30.<input type="button" value="-" />
31.<input type="button" value="=" />
32.<input type="button" value="+" onclick="tambahSize()" /><br /><br />
33.<img id="gambar" src="uns.gif" />
34.</div>
35.</body>
36.</html>
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:
view sourceprint?
01.<html>
02.<head>
03.<title>Ubah Size Image</title>
04. 
05.<script type="text/javascript">
06. 
07.var panjang;
08.var lebar;
09.var n = 0;
10. 
11.function bacaUkuran()
12.{
13.panjang = document.getElementById("gambar").width;
14.lebar = document.getElementById("gambar").height;
15.}
16. 
17.function tambahSize()
18.{
19.n++;
20.document.getElementById("gambar").width = Math.pow(2, n) * panjang;
21.document.getElementById("gambar").height = Math.pow(2, n) * lebar;
22.}
23. 
24.function kurangiSize()
25.{
26.n--;
27.document.getElementById("gambar").width = Math.pow(2, n) * panjang;
28.document.getElementById("gambar").height = Math.pow(2, n) * lebar;
29.}
30. 
31.</script>
32.</head>
33.<body onload="bacaUkuran()">
34.<div align="center">
35.<h1>Sampel Script Mengubah Size Gambar</h1>
36.<h2>Logo UNS</h2>
37.<input type="button" value="-" onclick="kurangiSize()" />
38.<input type="button" value="=" />
39.<input type="button" value="+" onclick="tambahSize()" /><br /><br />
40.<img id="gambar" src="uns.gif" />
41.</div>
42.</body>
43.</html>
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.
view sourceprint?
01.<html>
02.<head>
03.<title>Ubah Size Image</title>
04. 
05.<script type="text/javascript">
06. 
07.var panjang;
08.var lebar;
09.var n = 0;
10. 
11.function bacaUkuran()
12.{
13.panjang = document.getElementById("gambar").width;
14.lebar = document.getElementById("gambar").height;
15.}
16. 
17.function tambahSize()
18.{
19.n++;
20.document.getElementById("gambar").width = Math.pow(2, n) * panjang;
21.document.getElementById("gambar").height = Math.pow(2, n) * lebar;
22.}
23. 
24.function kurangiSize()
25.{
26.n--;
27.document.getElementById("gambar").width = Math.pow(2, n) * panjang;
28.document.getElementById("gambar").height = Math.pow(2, n) * lebar;
29.}
30. 
31.function resetSize()
32.{
33.n = 0;
34.document.getElementById("gambar").width = Math.pow(2, n) * panjang;
35.document.getElementById("gambar").height = Math.pow(2, n) * lebar;
36.}
37. 
38.</script>
39.</head>
40.<body onload="bacaUkuran()">
41.<div align="center">
42.<h1>Sampel Script Mengubah Size Gambar</h1>
43.<h2>Logo UNS</h2>
44.<input type="button" value="-" onclick="kurangiSize()" />
45.<input type="button" value="=" onclick="resetSize()" />
46.<input type="button" value="+" onclick="tambahSize()" /><br /><br />
47.<img id="gambar" src="uns.gif" />
48.</div>
49.</body>
50.</html>
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.
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)