CODEWITHSUNDEEP
phpjavascriptcanvasuri
cl0udc0ntr0l
cl0udc0ntr0l

Reputation: 149

AJAX, PHP and canvas URI

I have a canvas drawing tool with a save button. When you click the save button it executes this code.

function saveDrawing() {
   var url = canvas.toDataURL();
   w = window.open('saveimage.php');
   w.onload = function(){
      var placeholder = w.document.getElementById("placeholder");  
      placeholder.src = url;
   };  
}

The image is displayed in the new window in the placeholder element. From this page I want to include two buttons one to download the image as a .png and the other to submit the png via email along with some form data. I understand that php must be used to handle the server side stuff. I looked around the web and came up with this.

The AJAX Request in saveimage.php:

function saveViaAJAX(){
   var placeholder = document.getElementById("placeholder");
   var canvasData = placeholder.src;
   var postData = "canvasData="+canvasData;
   var ajax = new XMLHttpRequest();
   ajax.open("POST",'save.php',true);
   ajax.setRequestHeader('Content-Type', 'canvas/upload');
   ajax.send(postData);
}

and the save.php:

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

the save button in saveimage.php looks like this:

<button onclick="saveViaAJAX();" class="button">

I get nothing when the button is clicked. Is this even the best way to approach this? Or should I go from dataToURL(); straight to be php to be decoded and stored and the include the php variable in my placeholder element? Would I need a session to do that? A bit lost on this one. Server side is not my strong point. Thanks in advance!

Upvotes: 0

Views: 1103

Answers (1)

Joep
Joep

Reputation: 112

This is my code to save canvas content to Twitter, Facebook and Pinterest. I used the sketch.js with some tweeks for the iPad.

HTML:

  <a onClick="saveViaAJAX(this.id);" id="saveimg2Twitter">Twitter</a>
  <a onClick="saveViaAJAX(this.id);" id="saveimg2Facebook">Facebook</a>
  <a onClick="saveViaAJAX(this.id);" id="saveimg2Pinterest">Pinterest</a>

Ajax:

function saveViaAJAX(clicked_id) {
    var testCanvas = document.getElementById("colors_sketch");
    var canvasData = testCanvas.toDataURL("image/png");
    var postData = "canvasData="+canvasData;
    var myPopup = window.open ("pleasewait.html", '', '');
    var ajax = new XMLHttpRequest();
    ajax.open("POST",'php/CanvasSave.php',false);
    ajax.setRequestHeader('Content-Type', 'canvas/upload');
    ajax.onreadystatechange=function()
    {
        if ((ajax.readyState == 4) && (clicked_id == 'saveimg2Twitter'))
        {
                myPopup.location = "http://twitter.com/share?text=Look%20at%20my%20doodle%20at%20Studiomik.nl&url=http://www.brandtontwerpbureau.nl/test/doodle.php?afb="+ajax.responseText;
        }
        else if ((ajax.readyState == 4) && (clicked_id == 'saveimg2Facebook'))
        {
                myPopup.location = "http://www.facebook.com/sharer.php?u=http://www.brandtontwerpbureau.nl/test/doodle.php?afb="+ajax.responseText;
        }
        else if ((ajax.readyState == 4) && (clicked_id == 'saveimg2Pinterest'))
        {
                myPopup.location ="//pinterest.com/pin/create/button/?url=http://www.brandtontwerpbureau.nl/test/doodle.php?afb="+ajax.responseText+"&media=http://www.brandtontwerpbureau.nl/test/php/"+ajax.responseText+"&description=Look%20at%20my%20doodle%20at%20Studiomik.nl";
        }
    }
    ajax.send(postData);
}

CanvasSave.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 = uniqid(studiomik_).".png";
echo($fp);
file_put_contents($fp, $unencodedData);
$image = imagecreatefrompng("postit.png");
$overlay = imagecreatefrompng($fp);
imagealphablending($image, true);
imagesavealpha($image, true);
imagealphablending($overlay, true);
imagesavealpha($overlay, true);
imagecopy($image, $overlay, 20, 20, 0, 0, 438, 438);
imagedestroy($overlay); 
//Save the image to a file
imagepng($image, $fp);
}

The image created on the canvas will merge together with an image of a postit, so it looks like it is drawn on it… and saved on the server.

Upvotes: 1

Related Questions