HTML 5 Canvas Image Crop Tutorial [Basic]
Ok, Pembahasan terakhir kita mengenai Canvas Image akan saya tutup dengan pembahasan HTML 5 Canvas Image Crop, karena setelah ini kita akan beralih ke Canvas text, Setelah sebelumnya kita membahas mengenai HTML 5 Canvas Image Size Tutorial [Basic].
Dari judul diatas, pastinya anda sudah bisa menebak apa yang akan kita buat kali ini. Yupz, kita akan memotong Gambar menggunakan Canvas HTML 5. Disini, Kita akan tetap menggunakan Method drawImage() dengan memasukkan 4 Parameter tambahan. Nha, parameter inilah yang nantinya bertugas menentukan lokasi Image yang akan dipotong.
Dan untuk kali ini pun saya akan tetap menggunakan Foto YUI hhe... Perhatikan Foto diatas, atau silahkan buka Url Demonya dan lihat Image yang telah saya Crop, Gambar yang besar merupakan Source(x,y) sedangkan gambar yang kecil merupakan Destination(x,y).
Dan disini, Method yang kita gunakan adalah:
c.drawImage(imageObj, sourceX, sourceY, sourceWidth,
sourceHeight, destX, destY, destWidth, destHeight);
Untuk Demo-nya Silahkan KLIK DISINI
Dan berikut Scriptnya:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>
function cropImage() {
var canvas=document.getElementById("myCanvas");
var c=canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
// draw reference image
c.drawImage(imageObj,50,30, 438, 300);
// draw cropped image
var sourceX = 150;
var sourceY = 0;
var sourceWidth = 150;
var sourceHeight = 150;
var destX = 370;
var destY = 220;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
c.drawImage(imageObj, sourceX, sourceY, sourceWidth,
sourceHeight, destX, destY, destWidth, destHeight);
}
imageObj.src = "darth-vader.jpg";
}
</script>
</head>
<body onload="cropImage()">
<canvas id="myCanvas" width="578" height="400"></canvas>
</body>
</html>
Untuk mempraktekkannya, silahkan Menuju Rancangan > Edit HTML Kemudian Centang Expand Template Widget, Hapus seluruh isi Template anda dan copy paste Script diatas ke dalam Template anda(Gunakan Blog Uji Coba anda yang saya suruh sebelumnya). Jika sudah, Save Template anda dan lihat hasilnya. Dan Untuk para Pecinta HTML 5 dengan Platform lain, silahkan buang bagian skinnya.
Sumber: Buku Introducing HTML 5 Karangan Bruce Lawson and Remy Sharp, Untuk lebih jelasnya anda dapat bertanya langsung kepada mereka Via Twitter di @brucel & @rem
Posting Komentar
Posting Komentar