Resize Image dengan PHP

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).

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

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.

<html>

<head>

<title>Ubah Size Imagetitle>

head>

<body>

<div align="center">

<h1>Sampel Script Mengubah Size Gambarh1>

<h2>Logo UNSh2>

<input type="button" value="-" />

<input type="button" value="=" />

<input type="button" value="+" /><br /><br />

<img id="gambar" src="uns.gif" />

div>

body>

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 Imagetitle>

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 Gambarh1>

21.<h2>Logo UNSh2>

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 2ⁿx. 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 Imagetitle>

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 Gambarh1>

29.<h2>Logo UNSh2>

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 2ⁿ pada Javascript.

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


Sedangkan untuk memperkecil ukuran image, kita cukup melakukan decrement pada variabel n nya saja (n--). Misal mula-mula panjang image adalah x (2⁰x) pixel, lalu diperbesar menjadi 2x (2⁰⁺¹x = 2¹x), lalu diperbesar lagi menjadi 4x (2¹⁺¹x = 2²x). Selanjutnya diperkecil, maka panjangnya menjadi kembali ke 2x (2^2-1x = 2¹x). Bila diperkecil lagi menjadi x (2^1-1x = 2⁰x), dan bila diperkecil lagi menjadi 1/2 x (2^{0 – 1}x = 2^-1x) dst.


Dengan ide di atas maka Javascript untuk memperkecil ukuran adalah:





view sourceprint?



01.<html>

02.<head>

03.<title>Ubah Size Imagetitle>

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 Gambarh1>

36.<h2>Logo UNSh2>

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 2⁰x = x (sama seperti ukuran aslinya). Demikian pula untuk lebarnya.





view sourceprint?



01.<html>

02.<head>

03.<title>Ubah Size Imagetitle>

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 Gambarh1>

43.<h2>Logo UNSh2>

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.

INFO4U

Jumat, 11 Mei 2012

Resize Image dengan PHP

Share to your friends

SATRION

Newsletter

INFO4U

Jumat, 11 Mei 2012

Resize Image dengan PHP

Share to your friends

Artikel Terkait

SATRION

Newsletter