Generate Image to Canvas Using jQuery

Kalau enggak ada kerjaan dan lagi bengong, baru AA mencari dan memperhatikan yang unik-unik serta mencari tandingan yg unik tersebut. Open this link jsrun.it/hirotweets/alphajpeg or jsdo.it/hirotweets/alphajpeg Perhatikan secara khusus penulisan syntax image pada halaman tersebut! Akan diperoleh 4 link image dikombinasikan menjadi satu, dalam sekali penulisan! Memang cukup merepotkan, tapi tutorial tersebut bukan membicarakan syntax-nya, melainkan convert image menjadi elemen canvas.
Syntax<img src="IMAGE-1"
data-origsrc="IMAGE-2"
data-jpegsrc="IMAGE-3"
data-filtersrc="IMAGE-4"
width="200" height="200" alt="image-alt">Berbicara tentang HTML5 canvas sangat banyak ragamnya. Satu yg menggelitik yaitu menggambar grafik untuk menghasilkan sebuah image *silahkan cari sendiri referensi artikel ttg canvas Koben pusing jg mau menerangkan, soalnya gua jg kagak tauk bro :D Intinya begini, image yg di convert melalui elemen canvas, bakal tercipta link (pd address browser) berupa base64 Coba sobat cari gambar yg dibuat dari HTML5-canvas image? Kalau sudah ketemu, lakukan klik kanan pd gambar tersebut: Save Image As, maka akan langsung terender canvas.png - View Image, pd address browser langsung terender link base64. Itulah yg saya tahu :)

Kembali ke topic awal, rendering image to canvas. Point utama adalah menggenerate link image menjadi elemen canvas. Koben dapatkan satu link yg mungkin sobat mau memasangnya jQuery image to canvas github.com/schnalle/jQuery.imageToCanvas.

Pasangkan script berikut di tempat semestinya<script src="https://raw.github.com/schnalle/jQuery.imageToCanvas/master/jquery.imageToCanvas.js" type="text/javascript"></script>Kode CSS (bisa kalian kreasikan lagi, ini hanya basic syarat)

canvas {
border: none;
margin: 5px auto;
text-align: center;
box-shadow: 1px 2px 3px #333;
}
.itc {
width: 400px;
height: 300px;
margin: 10px 5px;
box-shadow: 1px 2px 5px #333;
}

Script pemanggilnya

<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$('.itc').imageToCanvas();
});
//]]>
</script>

Syntax HTML<img class="itc" src="LINK-IMAGE" alt="" />DEMO
jsfiddle.net/bebenkoben/XTnaA/showPelajari terlebih dahulu seluk beluk element canvas. Ada yg bilang bisa optimasi image, ada yg bilang begini, begitu, cerdiknya pelajari ajah dulu :) Dengan begini lumayan yg mau nyuri² gambar sedikit terhambat :P
Happy canvas \m/