无法将画布数据从 Javascript AJAX 发送到 PHP 页面答案

【问题标题】：Cannot Send canvas data from Javascript AJAX to PHP page无法将画布数据从 Javascript AJAX 发送到 PHP 页面
【发布时间】：2013-09-11 08:17:32
【问题描述】：

我的页面上有一个视频元素，显示网络摄像头流。接下来我有一个 canvas，它具有获取 snapshots 并在 canvas 中显示图像的功能。现在我需要将此画布图像发送到服务器并使用 PHP 将其保存到文件中。我在网上结合了各种教程，最后得到了下面的代码，但是保存在服务器文件夹中的图像只是空白，所以我猜 PHP 文件没有正确接收要显示的数据...如果可以请帮助:) 只有 Jquery + AJAX 不传输 post 变量是问题... 这是代码：

var int=self.setInterval(function(){snapshot()},2000);

    function snapshot() {
      // Draws current image from the video element into the canvas
        ctx.drawImage(output, 0,0, canvas.width, canvas.height);
        var dataURL = canvas.toDataURL();
        dataURL = dataURL.replace('data:image/png;base64,','');

        $.ajax({
        type: 'POST',
        url: 'onlinewebcams.php',
        data: postData,
        contentType: 'application/json'
        });

    }

然后有一个单独的 PHP 文件，但包含在保存 POST 图像的同一页面上（不起作用）：

这里是 PHP 文件代码：

sleep(5); // wait 5 seconds
define('UPLOAD_DIR', 'allwebcams/');
$img = $_POST['dataURL'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR .uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';

【问题讨论】：

标签： ajax post canvas webcam

【解决方案1】：

有几点：

客户端：

在您的 ajax POST 中，您尚未定义 postData，因此 ajax 正在发送一个空白字符串。

您应该改为发送 dataURL。然后，您的数据包是一个未命名的字符串。

我更喜欢将数据包装到一个对象中。这样，如果我以后想发送更多信息而不仅仅是编码图像，我只需向对象添加另一个属性。例如，您可能希望发送生成图像的网络摄像头的 ID，以及生成图像的时间。

顺便说一句，发送的内容类型不是 json，它是 base64 编码的图像数据。您可以忽略内容类型，因为您的 PHP 知道要处理的数据类型。

此外，您可能希望从 PHP 获得指示成功/失败的响应，或者可能是它刚刚保存的文件的名称。您可以使用 ajax POST 中的 .done 响应回调处理程序来做到这一点。

试试这个 AJAX POST：

// 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);
});

您可以在 ajax 之前或 PHP 内部去除数据类型标头 (data:image/png;base64)。

在您的代码中，您在客户端代码和 PHP 代码中都将其剥离——这是不必要的；）

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.';

}

还有常见的陷阱：

【讨论】：

谢谢你，马克，让我看看这是否有效，很有趣我添加了 sleep();函数，因为我从画布捕获的网络摄像头视频稍后会生成图像，因此 PHP 脚本会在画布填充之前加载好:)
我再次尝试使用新代码，您的代码似乎详细解释了需要什么和不需要什么，所以谢谢你。但是，我认为可能还有另一个问题，我仍然没有收到 PHP 中 $_POST 变量的任何内容，它只是不打印任何值。也许它在我的虚拟主机上的配置不知道。 AJAX 不响应图片是否保存，甚至不报错。
网络管理从来都不是简单的事情，是吗？！好的，开始调试......你可以通过添加这个回调来让 jquery 给你一些失败信息： .fail(function(XHR,status){alert("fail:"+status ); }) 你也可以添加一个 . always(function() { alert("至少我完成了"); }) 确保确保您在服务器上正确设置了上传目录和写入权限。你也可以做一个简单的测试，让 php 回显 base64，看看你是否得到了 base64。调试网络总是很痛苦，直到“啊哈！”片刻。祝您调试顺利！
谢谢马克，我会试一试

【解决方案2】：

这里！使用php上传画布图像数据首先，通过将图像数据发送到php文件来调用ajax并在php文件上传脚本中获取图像数据如下：所以你已经看到了这个解决方案。

$upload_dir = "upload/";
$iid = $_POST['id'];
$img_encode = str_replace('data:image/png;base64,', '', $iid);
$img = str_replace(' ', '+', $img_encode);
$data = base64_decode($img);
echo $filename = md5(uniqid()) . '.png';
$file = $upload_dir.$filename;
file_put_contents($file, $data);

【讨论】：