通过php发送Canvas数据到图像文件


Sending Canvas data to image file via php

经过多年的寻找,我发现了这篇文章,这是我问题的答案。当我尝试它的图像文件被创建,但里面没有任何数据。下面是我的代码。你能告诉我,如果我遗漏了什么,或者有任何修改,使图像文件可读。

谢谢

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);
?>
ajax.send("canvasData"+canvasData );     
            ^^^^^^^^
$rawData = $_POST['imageData'];
                   ^^^^^^^^

因为你没有=在那里,你发送了一个非常长的canvasDatablahblahblah密钥名,没有值。即使键名正确设置为canvasData,您的PHP代码也会寻找一个完全不同的名称imageData

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