How can I save an HTML5 canvas image in cakephp? - ajax

Question

I've been able to save canvas image data using .ajax() and php but not in cake. The way I've done it is like the following. I have a javascript that runs when a user clicks "submit" button in a form after making a canvas drawing:
var formdata = $("form").serialize();
var data = document.getElementById("canvasElement").toDataURL();
formdata += "&img=" + data;
$.ajax({
type: "POST",
url: "process.php",
data: formdata,
success: function() {
$('body').prepend('<div class="alert">Your bit of data was successfully saved.</div');
$('.alert').delay(2000).slideUp('slow');
},
error:function (xhr, ajaxOptions, thrownError){
alert("Error Status: " + xhr.status + " Thrown Errors: "+thrownError);
}
Then process.php handles the image data and saves it to a file. Here's the salient part:
$img = $_POST['img'];
// remove header information that's sent with the encoded data
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = "images/" . uniqid() . '.png';
This all works as I hoped. How can I do this in a cakephp framework? I've read that in place of a regular cake form submit, you can use the Js helper for an ajax submit like this:
echo $this->Js->submit('Save');
Are there arguments I could pass into the submit function that would let me save the image data? Is there a better way?

Answer 1

I've gotten it to work, but I'm not completely sure I understand why and I'd like to understand the best way to do this in cake. I added a command for the Js helper to put scripts in the head with this: echo $this->Js->writeBuffer(array('cache'=>TRUE));
Other than that, I don't think I changed anything. However, my redirect in my save function in the controller doesn't do anything. I'm only able to achieve a redirect by putting it in the javascript as below.
<?php
// This is my form for saving the drawing
echo $this->Form->create('Drawing');
echo $this->Js->submit('Save', array(
'before'=>$this->Js->get('#sending')->effect('fadeIn')
));
echo $this->Form->end();
?>
public function save() {
// This is my save function in the controller
if ($this->request->is('post')) {
$img = $this->request->data['img'];
// remove header information that's sent with the encoded data
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = uniqid() . '.png';
$filepath = 'drawings/';
$success = file_put_contents($filepath . $file, $data);
print $success ? $file : 'Unable to save the file.';
$arr = array( 'Drawing' => array ( 'filename' => $file, 'filepath' => '/images'));
if ($this->Drawing->save($arr)) {
$this->Session->setFlash('Your drawing has been saved!');
// this redirect doesn't work (and I do have an index page and function)
$this->redirect(array('action' => 'index'));
} else {
$this->Session->setFlash('Unable to add your post.');
}
}
}
Javascript is here:
var data = document.getElementById("canvasElement").toDataURL();
formdata = "img=" + data;
$.ajax({
type: "POST",
url: "save",
data: formdata,
success: function() {
window.location.replace("index"); // This redirect works
},
error:function (xhr, ajaxOptions, thrownError){
alert('error in: ' + settings.url + ' \\n'+'error:\\n' + exception);
}
});
}