Phototype: manipulasi gambar dengan Javascript


Misalkan kita memiliki gambar seperti di bawah ini (ambil saja dari Flickr):

Pertama, mari kita kecilkan ukurannya :

l_oPhoto = new Photo();
l_oPhoto.resize({width:200});
document.body.appendChild(l_oPhoto.fetch());

Hmm… lumayan..
Hal tersebut dikarenakan resize dari sisi serversidenya..
Baik, slanjutnya kita akan lakukan flipping..

l_oPhoto = new Photo();
l_oPhoto.resize({width:200});
l_oPhoto.flipV(); // Flip vertical, use flipH to flip horizontal
document.body.appendChild(l_oImage.fetch());

Dan merotasikannya beberapa derajat

l_oPhoto = new Photo();
l_oPhoto.resize({width:200});
l_oPhoto.flipV();
l_oPhoto.rotate(3); // rotate 3 degrees
document.body.appendChild(l_oPhoto.fetch());

Kemudian kita beri bayangan dan membuatnya enak dilihat..😛

l_oPhoto = new Photo();
l_oPhoto.resize({width:200});
l_oPhoto.flipV();
l_oPhoto.rotate(3);
l_oPhoto.dropShadow();
l_oPhoto.makeSketchy();
document.body.appendChild(l_oPhoto.fetch());

Atau kita buat hitam-putih ??

l_oPhoto = new Photo();
l_oPhoto.resize({width:200});
l_oPhoto.flipV();
l_oPhoto.rotate(3);
l_oPhoto.dropShadow();
l_oPhoto.toGreyScale();
document.body.appendChild(l_oPhoto.fetch());

Menambahkan teks

l_oPhoto = new Photo();
l_oPhoto.resize({width:200});
l_oPhoto.rotate(3);
l_oPhoto.dropShadow();
l_oPhoto.addCaption('Get ajaxorized!', '1942.ttf');
document.body.appendChild(l_oPhoto.fetch());

Kemudian bisa kita tambahkan gambar :

1. l_oPhoto = new Photo();
2. l_oPhoto.resize({width:200});
3. l_oPhoto.rotate(3);
4. l_oPhoto.dropShadow();
5. l_oPhoto.addCaption('Cheers, Chuck', '1942.ttf');
6. l_oPhoto.addChuckNorris(); // every library should have this function imo
7. document.body.appendChild(l_oPhoto.fetch());

Sumber : http://ajaxorized.com
Download source : sini

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s