Ajax 如何在cakephp中保存HTML5画布图像？

我已经能够使用.ajax（）和php保存画布图像数据，但不能保存在cake中。我这样做的方式如下。我有一个javascript，当用户在绘制画布后单击表单中的“提交”按钮时运行：

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

这一切都如我所愿。如何在cakephp框架中实现这一点？我已经读到，代替常规的蛋糕表单提交，您可以使用Js助手进行ajax提交，如下所示： echo$this->Js->submit（'Save'）；

---

是否有参数可以传递到submit函数中以保存图像数据？有更好的办法吗

我已经让它工作了，但我不能完全确定我是否理解为什么，我想知道在蛋糕中实现这一点的最佳方法。我为Js助手添加了一个命令，用它将脚本放在头部：

echo$this->Js->writeBuffer（array（'cache'=>TRUE））

除此之外，我不认为我改变了什么。但是，控制器中保存函数中的重定向没有任何作用。我只能通过将其放入javascript中来实现重定向，如下所示

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

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

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