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. :D

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 :D

Mengakses Camera dengan HTML5

Bisa mengakses Camera dan Capture image di website menggunakan HTML5al yang mungkin, sudah lama mungkin tapi saya yang baru tau. :D

Sekarang Setelah melakukan riset, browsing2 dari berbagai sumber akhirnya dapat nih dasarnya. lalu tak tambahin CSS serta tak edit trigernya semoga bisa bermanfaat. meskipun ini masih jauh dari yang saya cari tapi karena saya masih awam senanga rasanya bisa menemukan hal seperti ini. yah buat catatan juga.. karena ini juga baru malam pertama riset dan coba2. semangat terus.. :D

setelah selesai tak ada salahnya di catat disini, siapa tau temen2 juga ada yang mengalami masalah yang sama dengan saya.

Ini adalah hasilnya, ya masih sederhana silahkan dikembangkan sendiri.

hasil by fai

Langsung Saja, berikut adalah canvas yang kita buat di dalam body :

<!–

Biasanya Element tidak akan dibuat atau muncul jika belum di ijinkan (allow) oleh client diperbolehkan akses camera.

–>

<div id=”awal”>

<video id=”video” width=”200″ height=”150″ autoplay></video>

Klik Video diatas Untuk mengambil Gambar

</div>

<div id=”hasil”>

<canvas id=”canvas” width=”400″ height=”300″></canvas>

Hasil Capture foto.

</div>

Lalu kita buat javascriptnya letakan di Head ya :

<script type="text/javascript">// <![CDATA[
// Menambahkan listener setelah conten selesai di load

window.addEventListener("DOMContentLoaded", function() {

// menyeleksi elemen dan membuat pengaturan awal

var canvas = document.getElementById("canvas"),

context = canvas.getContext("2d"),

video = document.getElementById("video"),

videoObj = { "video": true },

errBack = function(error) {

console.log("Video capture error: ", error.code);

};

// event saat tombol tak foto

document.getElementById("video").addEventListener("click", function() {

context.drawImage(video, 0, 0, 400, 300);

//alert('test ko ngga bisa ya');

});

// ambil video untuk kanvas awal

if(navigator.getUserMedia) { // Standard

navigator.getUserMedia(videoObj, function(stream) {

video.src = stream;

video.play();

}, errBack);

} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed

navigator.webkitGetUserMedia(videoObj, function(stream){

video.src = window.webkitURL.createObjectURL(stream);

video.play();

}, errBack);

}

}, false);
// ]]></script>

Mudah bukan ? :D

Ingat sebagai catatan walaupun file html biasa tapi untuk bisa akses kamera maka harus dijalankan di dalam server contoh apache, serta saya ememakai browser google crome.

anda bisa download source codenya langsung.. cuma 1 halaman ko. tenang aja..

link Download tutorial acces camera with html 5 : akses camera dengan html 5