0

So after ages of looking I found this post which is an answer to my problem. When I tried it out the image file was created but there wasn't any data inside of it. Here is my code below. Can you show me if I have missed something out or any corrections that will make the image file readable.

Thank you

index.html 

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="364.8" height="220.8" style=" border:1px solid #d3d3d3;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
     var context = canvas.getContext("2d");
     var imageObj = new Image();
     imageObj.onload = function(){
         context.drawImage(imageObj, 0, 0);
         context.font = "20pt Tahoma";
         context.fillStyle = '#3a3a3a';
         context.fillText("TEST", 20, 100);
         context.font = "15pt Tahoma";
         context.fillStyle = '#3a3a3a';
         context.fillText("youremail@something.com", 20, 130);

     };
     imageObj.src = "T1.png";    
var testCanvas = document.getElementById('myCanvas');
var canvasData = testCanvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.open("POST",'http://www.lapisdesigns.tk/Lapisdesigns/process.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
ajax.send("canvasData"+canvasData );     
</script>
</body>
</html>

process.php

<?php
$rawData = $_POST['imageData'];
$filteredData = explode(',', $rawData);
$unencoded = base64_decode($filteredData[1]);
//Create the image 
$fp = fopen('sigs/test1.png', 'w');
fwrite($fp, $unencoded);
fclose($fp); 
$file_name = 'test1.png';
$file_size = strlen($filteredData[1])/1024; //This may be wrong, doesn't seem to break for me though.
$fh = fopen('sigs/test1.png', 'r');
$content = fread($fh, $file_size);
$content = base64_encode($content);
fclose($fh);
?>
Community
  • 1
  • 1
Tom Buxton
  • 65
  • 2
  • 9

1 Answers1

0
ajax.send("canvasData"+canvasData );     
            ^^^^^^^^

$rawData = $_POST['imageData'];
                   ^^^^^^^^

Since you have no = in there, you're sending over a single extremely long canvasDatablahblahblah key name, with no value. And even if the keyname was correctly set to canvasData, your PHP code is looking for a completely different name imageData.

Try

ajax.send("imageData=" + canvasData);
           ^^^^^^^^^--- note new new
                    ^---note the =

instead.

Marc B
  • 356,200
  • 43
  • 426
  • 500