0 Replies - 21302 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

<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;

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

<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 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.setRequestHeader('Content-Type', 'canvas/upload');

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


php section


	$filteredData=substr($imageData, strpos($imageData, ",")+1);
	$fp = fopen( 'test.png', 'wb' );
	fwrite( $fp, $unencodedData);
	fclose( $fp );

Is This A Good Question/Topic? 0
  • +

Page 1 of 1