Cannot Send canvas data from Javascript AJAX to PHP page

Question

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

Answer 1

A couple of things:

Client-Side:

In your ajax POST, you have not defined postData so the ajax is sending a blank string.

You should send dataURL instead. Your data packet is then an un-named string.

I prefer to wrap the data into an object. That way if I later want to send more info than just the encoded image, I just add another property to the object. For example you might want to send the id of the webcam that generated the image and maybe the time the image was generated.

BTW, The content type being send is not json, it's base64 encoded image data. You can leave content type out since your PHP knows what datatype is will be handling.

Also, you might want to get a response from PHP indicating success/failure or maybe the name of the file it just saved. You can do that with the .done response callback handler in the ajax POST.

Try this 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);
});

You can strip off the datatype header (data:image/png;base64) before ajax or inside PHP.

In your code you strip it both in the client code and PHP code--unnecessary ;)

The PHP

I'm not really sure why you're sleeping in the php code--anyway...

In your PHP, you should always check that the data exists and is not empty before trying to process it. Some php servers get particularly upset if they are fed empty data packets.

Your $img=$_POST['dataURL'] is asking for a named piece of data that doesn't exist. This is the reason for the empty file that php is creating.

Try this PHP code:

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

}

And the usual gotchas:

• Make sure you have properly set up your upload directory.
• Make sure you have permissions set properly on the upload directory.

Answer 2

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