Question

我写了一个网页，其目的就像是一个调查，它既在html文本框中提交条目，又在画布上绘制图像。目前，一旦按下“提交”，我的PHP文件就会通过“发布”从HTML表单传输到数据库。在我的HTMl文件中的脚本中，我通过“ var dataURL = canvas.toDataURL（）;”来转换画布图形。

我想知道如何（希望使用相同的PHP文件）将var dataURL与我的HTML表单一起发送到mySQL。我也不完全确定dataURL应该如何存储在mySQL中。但目标是输入“ ID，名称，图像（dataURL）”之类的条目。我对PHP还是很陌生，我听说通常会使用AJAX，但是我不确定如何使它与HTML表单一起使用。

感谢您的帮助，谢谢！

Answer 1

您当前如何发送数据？您是否在toDataURL（）中指定了数据格式？您还可以查看以下Decoding a canvas todataURL和Sending a canvas.toDataUrl() to php via AJAX，您也可以使用canvas.toDataURL（“ image / png”）作为图像发送它。

该问题与您的问题最接近，可能重复的问题看起来How to save an HTML5 Canvas as an image on a server?

还要通过How To Save Canvas As An Image With canvas.toDataURL()?并 Form submit with AJAX passing form data to PHP without page refresh

Answer 2

如果要提交表单数据而没有实际导航到浏览器中的脚本URL，则需要使用AJAX。 AJAX允许您将数据发送到脚本并从脚本接收响应，而无需离开页面即可。如果这是您要寻找的内容，那么有很多示例说明如何在SO和其他来源上使用AJAX。但是，由于您要发送一些自定义数据，因此有两个选择：

向表单添加隐藏的输入，并使用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字符串的大小（请参阅《 MySQL 8.0参考手册》中的The BLOB and TEXT Types）。祝你好运！

Answer 3

如果您知道javascript，请学习jQuery，因为这将使ajax请求更简单。借助ajax，您可以使用POST发送数据。

要存储数据URL，您需要在mysql表中指定文件的地址：例如：如果我的个人资料图片位于“ rootDIR / profiles / myname.jpg”中，则将“ profiles / myname.jpg”存储在表格中。

将带有Javascript变量的HTML表单发送到PHP-> Mysql

3 个答案: