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