New Topic/Question
Reply
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 );
}
?>
MultiQuote
| 