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
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()
.