Сохранять имя файла изображения Canvas и / или путь к базе данных при сохранении?

Question

На моей странице есть холст с кнопкой Сохранить, которая сохраняет PNG файл изображения.

function save() {
   var canvas = document.getElementById('drawing');
   var dataURL = canvas.toDataURL();
   $.ajax({
   type: "POST", 
   url: "canvas_ajax_upload_post.php", 
      data: { img: dataURL }      
   }).done(function(msg){ 
      alert(msg); 
   });
}

canvas_ajax_upload_post.php выглядит следующим образом:

<?php
$img = $_POST['img'];
if (strpos($img, 'data:image/png;base64') === 0) {
   $img = str_replace('data:image/png;base64,', '', $img);
   $img = str_replace(' ', '+', $img);
   $data = base64_decode($img);
   $file = 'uploads/img'.date("YmdHis").'.png';
   if (file_put_contents($file, $data)) {
      echo "The canvas was saved as $file.";
   } else {
      echo 'The canvas could not be saved.';
   }   
}
?>

Это отлично работает, изображения сохраняются в папке загрузки на моем сервере.То, что я пытался сделать, это сохранить имя файла в моей базе данных SQL.У меня есть скрытое поле формы на главной странице, которому я хотел бы передать имя файла или путь к файлу после сохранения изображения, но я не могу понять, как это сделать.

Я попытался встроить код JavaScript в файл PHP, но он просто обрабатывает его как текстовую строку и включает его во всплывающее окно с предупреждением.По сути, я пытаюсь использовать переменную $file из файла php в коде JavaScript.

 E.g. document.getElementById("hidden_form_field").value = $file;

Кто-нибудь может помочь?

Answer 1

Насколько я понимаю из вашего вопроса, вы пытаетесь получить значение $ file back form php.
Вы можете вернуть значение через переменную msg (что такое php echo s) в вашей функции $.ajax.done.
Например:

function(msg){
    alert(msg);
    if(msg.search("The canvas was saved as")!=-1){//was saved
        document.getElementById("hidden_field").value=msg.slice(23);//assuming string "The canvas was saved as $file."
    }
}

Answer 2

Вы можете передать имя файла в объекте данных:

function save() {
    var canvas = document.getElementById('drawing');
    var dataURL = canvas.toDataURL();
    $.ajax({
        type: "POST", 
        url: "canvas_ajax_upload_post.php", 
        data: { 
            img: dataURL,
            filename: document.getElementById("hidden_form_field").value
        }      
    }).done(function(msg){ 
        alert(msg); 
    });
}

Затем получить переменную "filename", получив $ _POST ["filename"]:

<?php
$img =        $_POST['img'];
$filename =   $_POST['filename'];
if (strpos($img, 'data:image/png;base64') === 0) {
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = 'uploads/img'.date("YmdHis").'.png';
    if (file_put_contents($file, $data)) {
        echo "The canvas was saved as $file.";
    } else {
        echo 'The canvas could not be saved.';
    }   
    // DO SOME SQL QUERY W/ $filename variable
    // SQL CODE HERE
}
?>

You 'Вам нужно будет включить ваш код SQL-запроса для использования переменной $ filename.Я не видел этот код в вашем вопросе.