不能从Javascript AJAX发送帆布数据到PHP页面 [英] Cannot Send canvas data from Javascript AJAX to PHP page

问题描述

我有一个视频元素我的网页上显示的网络摄像头流。 接下来，我有一个画布用的功能，需要的快照并显示图像的画布。 现在我需要发送此画布图像服务器，并将其保存到PHP文件。 然而，我的组合各种在线教程，结束了这个code以下， 被保存在服务器上文件夹的图像仅仅是空白的，所以我想在PHP文件不 正确地接收数据显示......请帮助，如果你能:)只有jQuery的AJAX +不发送后变量的问题... 这里是code：

  VAR INT = self.setInterval（函数（）{快照（）}，2000）;

    快照功能（）{
      //绘制当前图像的视频元素到画布
        ctx.drawImage（输出，0,0，canvas.width，canvas.height）;
        变种dataURL = canvas.toDataURL（）;
        dataURL = dataURL.replace（'数据：图像/ PNG;的base64，'，''）;

        $阿贾克斯（{
        键入：POST，
        网址：onlinewebcams.php，
        数据：POSTDATA，
        的contentType：应用/ JSON
        }）;

    }
 

再有一个单独的PHP文件，而是包括节省张贴的图像（不工作）在同一页上：

下面是PHP文件code：

 睡眠（5）; //等待5秒钟
定义（'UPLOAD_DIR'，'allwebcams /'）;
$ IMG = $ _ POST ['dataURL'];
$ IMG = str_replace函数（数据：图像/ PNG;的base64'，''，$ IMG）;
$ IMG = str_replace函数（''，'+'，$ IMG）;
$数据= base64_de code（$ IMG）;
$文件= UPLOAD_DIR .uniqid（）。 巴纽;
$成功= file_put_contents（$文件，$数据）;
打印$成功？ $文件：'无法保存文件。;
 

解决方案

在这里！上传使用PHP的画布图像数据 首先，通过发送图像数据调用Ajax来php文件和获取图像数据在PHP文件上传脚本如下是：所以，你必须看到这个解决方案

  $ upload_dir =上传/;
$独立同分布= $ _ POST ['身份证'];
$ img_en code = str_replace函数（数据：图像/ PNG;的base64'，''，$ IID）;
$ IMG = str_replace函数（''，'+'，$ img_en code）;
$数据= base64_de code（$ IMG）;
回声$文件名= MD5（uniqid（））。 巴纽;
。$文件= $ upload_dir $文件名;
file_put_contents（$文件，$数据）;
 

I have a video element on my page showing webcam stream. Next I have a canvas with functions that takes snapshots and displays images in canvas. Now I need to send this canvas image to server and save it to file with PHP. I combined various tutorials online and ended up with this code below, however the image that is saved on the server folder is just blank, so I guess the PHP file does not properly receive the data to show... please help if you can :) Only The Jquery + AJAX not transmitting the post variable is the problem... here is the code:

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

    }

and then there is a separate PHP file, but included on the same page that saves the POSTed image(does not work):

here is the PHP file code:

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

解决方案

Here! upload canvas image data using php first, Call ajax through send image data to php file and get image data in php file upload script is below that : So You have see this solution.

$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);

这篇关于不能从Javascript AJAX发送帆布数据到PHP页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！