send form elements over ajax with kinetic js

Question

I'm using kinetic js to create a canvas and it also saves the canvas to an image file using this ajax:

    stage.toDataURL({
      callback: function(dataUrl) {        
        var url = 'export.php';
        $.ajax({ 
            type: "POST", 
            url: url,
            dataType: 'text',
            data: {
            base64data : dataUrl
            }
        });

I need to also pass some form variables to export.php - whats the best way to do that?

Thanks!

Zoe

Answer 1

Your JS part is correct:

function upload() {
    stage.toDataURL({
        callback: function (dataUrl) {
            $.ajax({
                type: "POST",
                url: 'export.php',
                dataType: 'text',
                data: {
                    base64data: dataUrl
                }
            });
        }
    });
}

In PHP, data arrive with the following pattern: 'data:image/png;base64,...characters'; ... So you have to extract the image part.

<?php
$data = $_POST['base64data'];

list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);

file_put_contents('image.png', $data);

Note that this solution is not specific to kineticjs. It can be used with any HTML5 canvas, provided that you replace stage.toDataURL() call by canvas.toDataURL().