Teknik Membuat Script Mengubah Ukuran Image dengan Javascript
May 28th, 2009 | by rosihanari |
Cetak Artikel Ini
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:
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 Image</title>
</head>
<body>
<div align="center">
<h1>Sampel Script Mengubah Size Gambar</h1>
<h2>Logo UNS</h2>
<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
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)
<html>
<head>
<title>Ubah Size Image</title>
<script type="text/javascript">
var panjang;
var lebar;
function bacaUkuran()
{
panjang = document.getElementById("gambar").width;
lebar = document.getElementById("gambar").height;
}
</script>
</head>
<body onload="bacaUkuran()">
<div align="center">
<h1>Sampel Script Mengubah Size Gambar</h1>
<h2>Logo UNS</h2>
<input type="button" value="-" />
<input type="button" value="=" />
<input type="button" value="+" /><br /><br />
<img id="gambar" src="uns.gif" />
</div>
</body>
</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 :
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.
<html>
<head>
<title>Ubah Size Image</title>
<script type="text/javascript">
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;
}
</script>
</head>
<body onload="bacaUkuran()">
<div align="center">
<h1>Sampel Script Mengubah Size Gambar</h1>
<h2>Logo UNS</h2>
<input type="button" value="-" />
<input type="button" value="=" />
<input type="button" value="+" onclick="tambahSize()" /><br /><br />
<img id="gambar" src="uns.gif" />
</div>
</body>
</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:
<html>
<head>
<title>Ubah Size Image</title>
<script type="text/javascript">
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;
}
</script>
</head>
<body onload="bacaUkuran()">
<div align="center">
<h1>Sampel Script Mengubah Size Gambar</h1>
<h2>Logo UNS</h2>
<input type="button" value="-" onclick="kurangiSize()" />
<input type="button" value="=" />
<input type="button" value="+" onclick="tambahSize()" /><br /><br />
<img id="gambar" src="uns.gif" />
</div>
</body>
</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.
<html>
<head>
<title>Ubah Size Image</title>
<script type="text/javascript">
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;
}
</script>
</head>
<body onload="bacaUkuran()">
<div align="center">
<h1>Sampel Script Mengubah Size Gambar</h1>
<h2>Logo UNS</h2>
<input type="button" value="-" onclick="kurangiSize()" />
<input type="button" value="=" onclick="resetSize()" />
<input type="button" value="+" onclick="tambahSize()" /><br /><br />
<img id="gambar" src="uns.gif" />
</div>
</body>
</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.
Anda ingin mendownload beberapa tool programming 100% gratis?
Silakan download di FREE PROGRAMMING TOOLS.
atau ingin berdonasi untuk pengembangan blog ini cukup dengan $1 via Paypal?
Beberapa artikel terkait
- Membuat Thumbnail Image dengan Script PHP
- Tentang DOM di Javascript
- Membuat Script Random Image dengan PHP
- Script Multiple File Upload Dengan PHP
- Membuat Sendiri Share Link Ke Social Network Dengan Javascript
- Ide Membuat Pembatasan Jumlah Karakter Pada Form dengan Counter
- Manipulasi Image dengan PHP
- Membuat Pilihan Combobox Dinamis Tanpa AJAX
- Javascript Untuk Validasi Input Hanya Angka Pada Form
- Alternatif Cara Membuat Form Dinamis Untuk Submit Data Secara Simultan
Share this article on:
Kata kunci: DOM - image - Javascript - script -
nice posting…
thx pak infonya…
salam kenal
asalamu’alaikum pak arie
pak bagaimana ya scrip ato logikanya kita mencari data dari database yang ada beberapa filenya berdasarkan kata kunci yang tersurat di dalam file di databse tersebut
contoh: misal dalam database ada field file
dimana isinya nantinya melinkkan nama file dengan file sesunguhnya yang isinya bisa artikel ato berita.
misal taruhlah ada file1 dan file2 dan file3 dimana isinya tentang berita olahraga. nah saya ingin mencari kata “bola” diabtara ketiga file tersebut. jika file1 dan file2 mengandung kata bola maka akan muncul. jadi intinya mencari berdasarkan kata tersurat di isi file tersebut. TErima kasih
jadi gini taruhlah
to ridwan: maksudnya file gimana sih? apa filenya disimpan dalam tabel dalam bentuk blob gitu atau gimana? Trus… filenya berekstension apa?
Terima kasih ya atas infonya…
Pak rosihanari thank’s banget ne scriptnya..Oi ya Pak saya mau nanya dikit..klo script php buat upload file gambar ke database dengan ketentuan file gambar akan di resize ukuran nya sesuai keinginan kita sebelum file itu masuk ke database gimana ya Pak?? dengan kata lain di resize dulu baru masuk ke database dan direktori yang sudah kita siapkan…Terimakasih..
.-= juli_cool´s last blog ..Hosting gratis di my-place =-.
to juli_cool: anda bisa baca artikelnya di sini http://blog.rosihanari.net/membuat-thumbnail-image-dengan-script-php
Wow…panjang scriptnya…tapi mantap abis dech pak..udah lama lho saya cari script nya. akhirnya di blog ini lah saya menemukannya. Sekali lagi terimakasih banyak ya pak.. Maju trus PHP Indoesia!!!!
.-= juli_cool´s last blog ..Hosting gratis di my-place =-.
bagus banget tutorialnya. tapi bagaimana ya pak, kalau saya ingin memperbesar image secara otomatis? misalkan jika image tersebut berada pada urutan paling atas, maka otomatis akan diperbesar, jika tidak akan berukuran normal.
terimakasih sebelumnya atas jawabanya
to : Rosihan.
Pak Rosihan saya sudah mencoba script javascript diatas, masalahnya :
1.jika imagenya di resize maka semakin besar imagenya maka imagenya akan pecah, bagaimana caranya agar imagenya jika di resize tidak pecah??
2. bagaimana juga caranya agar imagenya bisa diupload dan kemudian setelah diupload imagenya menyediakan fasilitas utk diresize dan image tidak pecah.
terima kasih untuk ilmunya.maju terus….
@clonystan: imagenya ya pake resolusi tinggi mas, jangan beresolusi rendah atau bersize kecil.
pertama2 terima kasih tanggapannya pak rosihan.
tp ada beberapa masalah jika ini diimplementasikan,
1.masalahnya kl image yang berresolusi tinggi dan ukuran image yang besar tentu secara interface dan ukuran file web akan sangat mengganggu.sementara kl file halaman yang mau dibuat terdiri dari banyak image pada 1 halaman yang sama, tentu hal ini tidak memungkinkan.
2. bagaimana jika file image tersebut dapat diupload dengan menggunakan form upload(php&mysql)??
terima kasih, mohon tanggapannya.
@cloudy: coba anda baca artikel2 tentang image upload di blog ini mas. Di search saja ya…
mas tanya
1.adakah tutorial penggunaan variabel global & lokal (php) dalam blognya mas ari, krn Q masih bingung penggunaannya mas?
2.apakah body onload=bacaukuran() itu nggak bisa ditambahin fungsi lagi mas.. atau cuma satu aja fungsinya, selama ini saya liat ditutorial2 selalu satu fungsi aja..
@taroom: belum ada mas pembahasan ttg variabel global dan lokal. Untuk pertanyaan kedua, iya mas itu hanya bisa membaca 1 fungsi saja. Kalo ingin beberapa fungsi ketika onload, anda harus panggil beberapa fungsi tsb di dalam function bacaukuran(), bukan di onload nya.