Вы захотите использовать AJAX, если хотите отправить данные формы без фактической навигации по URL-адресу скрипта в вашем браузере. AJAX позволяет отправлять данные в сценарий и получать ответ от сценария, и все это, не покидая страницы, на которой вы находитесь. Если это то, что вы ищете, есть много примеров того, как использовать AJAX на SO и других источниках. Однако, поскольку у вас есть некоторые пользовательские данные, которые вы хотите отправить вместе, у вас есть два варианта:
Добавьте скрытый ввод в вашу форму и заполните значение этого скрытого ввода dataURL.
Добавьте пользовательские данные в данные сериализованной формы.
Если перейти ко второму варианту, ваш вызов AJAX будет выглядеть примерно так:
// this is the id of the form
$("#idForm").submit(function(e) {
var form = $(this);
var url = form.attr('action'); //PHP script URL can also be manually entered here if the form does not have the 'action' attribute set
// get the dataURL from the canvas element
var dataURL = encodeURIComponent(canvas.toDataURL());
// build AJAX data string
var dataString = form.serialize() + "&dataURL=" + dataURL;
$.ajax({
type: "POST",
url: url,
data: dataString,
success: function(data){
alert(data); // *optional* show response from the php script.
}
});
e.preventDefault(); // cancel actual form submission.
});
Что касается хранения значения dataURL в базе данных MySQL, вы можете использовать поле в формате TINYTEXT, TEXT, MEDIUMTEXT или LONGTEXT в зависимости от ожидаемого размера создаваемых строк dataURL ( см. типы BLOB и TEXT в Справочном руководстве по MySQL 8.0). Удачи!