Menyimpan dan Upload Canvas HTML 5 ke Server

canvas

Sekarang kita coba mempelajari cara menyimpan canvas ke server, dari artikel sebelumnya kita sudah mempelajari cara meng Capture image dari Camera. Sekarang tinggal kita pelajari cara menyimpan image yang berada di canvas tersebut ke dalam server. bahkan ke dalam database jika teman-teman paham alurnya itu bukan hal yang susah. ok..

karena sudah malam tidak bisa panjang lebar, kalau ada pertanyaan bisa lewat komentar ya.😀

selain itu saya sediakan link download juga.. lengkap dengan database dll..  semoga bermanfaat.

ini script yang kita tulis untuk tempat canvasnya nanti..

</p>
<p style="text-align: left;"><h2>Menyimpan Canvas HTML 5</h2>
 <div id="img_canvas">
 <canvas id="image_canvas" width="300" height="300" onclick="simpan_canvas();"></canvas>
 Klik Image Untuk menyimpan..
 </div>
 <div>
 <div id="hasil_simpan"></div>
 </div></p>
<p style="text-align: left;">

Proses pertama pasti kita harus buat canvas dulu beserta isinya bisa image atau apa terserah.. saya asumsikan sudah paham. Lalu kita ambil data canvas tersebut dan kita kirim ke file php menggunakan ajax untuk di proses dan berikut adalah fungsi untuk memproses dan mengirim data canvas menggunakan ajax :


<script type="text/javascript">
 //****************************************************************
 // by saefulloh rifai.
 //****************************************************************
 function simpan_canvas()
 {
 var image_canvas = document.getElementById("image_canvas");
 var canvasData = image_canvas.toDataURL("image/png");
 var postData = "canvasData="+canvasData;

var ajax = new XMLHttpRequest();
 ajax.open("POST",'proses_simpan.php',true);
 ajax.setRequestHeader('Content-Type', 'canvas/upload');

ajax.onreadystatechange=function()
 {
 if (ajax.readyState == 4)
 {
 //alert(ajax.responseText);
 document.getElementById("hasil_simpan").innerHTML="Saved as<br><a target='_blank' href='"+ajax.responseText+"'>"+ajax.responseText+"</a>";
 }
 }
 ajax.send(postData);
 }

</script>

Selanjutnya kita ambil data yang dikirim menggunakan ajax dan menyimpan ke file di folder uploads dengan nama image.png. berikut scriptnya..

<?php

if(isset($GLOBALS["HTTP_RAW_POST_DATA"]))
 {
 $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
 $filteredData=substr($imageData, strpos($imageData, ",")+1);
 $unencodedData=base64_decode($filteredData);
 $fp = fopen( 'uploads/image.png', 'wb' );
 fwrite( $fp, $unencodedData);
 fclose( $fp );

echo 'uploads/image.png';
 }

?>

Download file lengkap :  http://www.4shared.com/rar/YkoEv_sd/simpan_canfas_by_fai.html

Semoga bermanfaat… maaf atas keterbatasan waktu mengenai penjelasan cara menyimpan canvas html 5 ke server , jadi singkat padat dan mungkin kurang jelas. hehe..

tapi tetap semangat.. Happy Coding😀

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