0

.ajax() と php を使用してキャンバス画像データを保存できましたが、ケーキには保存できませんでした。私が行った方法は次のようなものです。キャンバスの描画を作成した後、ユーザーがフォームの「送信」ボタンをクリックすると実行される 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);
    }

次に、process.php が画像データを処理し、ファイルに保存します。顕著な部分は次のとおりです。

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

これはすべて私が望んでいたように機能します。Cakephp フレームワークでこれを行うにはどうすればよいですか? 通常の Cake フォーム送信の代わりに、次のような ajax 送信に Js ヘルパーを使用できることを読みました: echo $this->Js->submit('Save'); 画像データを保存できる送信関数に渡すことができる引数はありますか? より良い方法はありますか？

4

1 に答える 1

0

私はそれを機能させましたが、その理由を完全には理解していません.ケーキでこれを行うための最良の方法を理解したいと思います. 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.');
}
  }
}

Javascriptはここにあります：

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);
    }
  });
}
于 2012-05-20T12:25:51.410 に答える