Canvas Menggunakan Javascript

 1. Html

<canvas width="250" height="250" style="border:1px solid #d3d3d3;" id="myCanvas"></canvas>

<hr />

<button onclick="draw()">Draw</button> | 

<button onclick="save()">Save</button>

2. Javscript

        <script type="text/javascript">

var img = new Image();

img.src="sample.jpeg";

function draw () {

  var c = document.getElementById("myCanvas");

  var ctx = c.getContext("2d");

  console.log(img.width);

  console.log(img.height);

  ctx.drawImage(img, 0, 0, 250, 250);

};

function save () {

  var c = document.getElementById("myCanvas");

  var ctx = c.getContext("2d");

  var imgData = ctx.canvas.toDataURL();

  

  var formdata = new FormData();

formdata.append( "foto", imgData );

var ajax = new XMLHttpRequest();

ajax.open( "POST", "parse.php" );

ajax.onreadystatechange = function() {

if(ajax.readyState == 4 && ajax.status == 200) {

if(ajax.responseText == "success"){

console.log(ajax.responseText)

} else {

console.log(ajax.responseText)

}

}

}

ajax.send( formdata );

};

</script>

3. PHP

<?php

$photo = $_POST['foto'];

if(!empty($photo)){

$image_no="5";

$image = explode(",", $photo);

$path = "uploads/".$image_no.".png";

$status = file_put_contents($path,base64_decode($image[1]));

if($status){

echo "Successfully Uploaded";

}else{

echo "Upload failed";

}

}else{

echo "Aduuh Gagal";

}

?>