有几件事:
客户端:
在您的 ajax POST 中,您尚未定义 postData,因此 ajax 发送的是空白字符串。
您应该发送 dataURL。那么你的数据包就是一个未命名的字符串。
我更喜欢将数据包装到一个对象中。这样,如果我以后想要发送更多信息而不仅仅是编码图像,我只需向对象添加另一个属性即可。例如,您可能想要发送生成图像的网络摄像头的 ID,以及生成图像的时间。
顺便说一句,发送的内容类型不是 json,而是 base64 编码的图像数据。您可以省略内容类型,因为您的 PHP 知道将处理什么数据类型。
另外,您可能希望从 PHP 获得指示成功/失败的响应,或者可能是刚刚保存的文件的名称。您可以使用 ajax POST 中的 .done 响应回调处理程序来完成此操作。
试试这个 AJAX 帖子:
// create a dataUrl from the canvas
var dataURL= canvas.toDataURL();
// post the dataUrl to php
$.ajax({
type: "POST",
url: "onlinewebcams.php",
data: {image: dataURL}
}).done(function( respond ) {
// you will get back the temp file name
// or "Unable to save this image."
console.log(respond);
});
您可以去掉数据类型标头(data:image/png;base64
) 在 ajax 之前或在 PHP 内。
在您的代码中,您在客户端代码和 PHP 代码中都将其剥离——没有必要;)
The PHP
我不太确定你为什么在 php 代码中睡觉——无论如何......
在 PHP 中,在尝试处理数据之前,您应该始终检查数据是否存在且不为空。如果某些 php 服务器收到空数据包,它们会特别不安。
您的 $img=$_POST['dataURL'] 正在请求一条不存在的命名数据。这就是 php 创建空文件的原因。
试试这个 PHP 代码:
// make sure the image-data exists and is not empty
// xampp is particularly sensitive to empty image-data
if ( isset($_POST["image"]) && !empty($_POST["image"]) ) {
// get the dataURL
$dataURL = $_POST["image"];
// the dataURL has a prefix (mimetype+datatype)
// that we don't want, so strip that prefix off
$parts = explode(',', $dataURL);
$data = $parts[1];
// Decode base64 data, resulting in an image
$data = base64_decode($data);
// create a temporary unique file name
$file = UPLOAD_DIR . uniqid() . '.png';
// write the file to the upload directory
$success = file_put_contents($file, $data);
// return the temp file name (success)
// or return an error message just to frustrate the user (kidding!)
print $success ? $file : 'Unable to save this image.';
}
以及常见的问题:
- 确保您已正确设置上传目录。
- 确保您对上传目录设置了正确的权限。