0 Replies - 11450 Views - Last Post: 07 January 2013 - 11:14 AM

#1 stringy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 11-July 12

save a canvas image with backgound image included

Posted 07 January 2013 - 11:14 AM

I have a canvas set, and use a jquery called sketch.js (http://intridea.github.com/sketch.js/)to draw on the canvas - all very straight forward.

I use ajax to send the file to the server and some php to save the file, so far so good

The problem I have is that the canvas background image is not saved along with the sketch (this is important other wise its just a load of squiggles). I have googled this to death but to no avail.

I have added my code so that you can see where i'm at but I am stumpped - I can draw to the canvas with javascript but the sketch.js then will not work.

I have read something about creating a canvas in the memory and drawing both images back to the 1st canvas but this has totally lost me - not even a clue as to where to start on that one

any suggestions would be helpful


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="sketch.js" type="text/javascript"></script>

    
<style type="text/css">
#tools_sketch {
	border: thin solid #F00;
}
</style>
</head>


<div class="tools">
  <a href="#tools_sketch" data-tool="marker">Marker</a>
  <a href="#tools_sketch" data-tool="eraser">Eraser</a>
</div>

<canvas style='background: url("http://localhost/car.png") no-repeat center;' id="tools_sketch" height="300" width="800"></canvas>


<script type="text/javascript">

//starts the sketch.js drawing
  $(function() {
    $('#tools_sketch').sketch({defaultColor: "#f00"});
  });
</script>

 <script type="text/javascript">
 //passes the image to the php script for saving
  function myFunction() 
     {
   var mycanvas = document.getElementById("tools_sketch"); //get your canvas
   
   var image = mycanvas.toDataURL("image/png");
 

   var ajax = new XMLHttpRequest();
	ajax.open("POST",'nextpage.php',false);
	ajax.setRequestHeader('Content-Type', 'canvas/upload');
	ajax.send(image);  
    };
	
 </script>

<button onclick="myFunction()">SAVE</button>


</body>




php section

<body>

<?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( 'test.png', 'wb' );
	fwrite( $fp, $unencodedData);
	fclose( $fp );
}
?>



Is This A Good Question/Topic? 0
  • +

Page 1 of 1