使用动力学 js 通过 ajax 发送表单元素答案

【问题标题】：send form elements over ajax with kinetic js使用动力学 js 通过 ajax 发送表单元素
【发布时间】：2014-11-30 15:07:55
【问题描述】：

我正在使用动力学 js 创建画布，它还使用此 ajax 将画布保存到图像文件中：

    stage.toDataURL({
      callback: function(dataUrl) {        
        var url = 'export.php';
        $.ajax({ 
            type: "POST", 
            url: url,
            dataType: 'text',
            data: {
            base64data : dataUrl
            }
        });

我还需要将一些表单变量传递给 export.php - 最好的方法是什么？

谢谢！

佐伊

【问题讨论】：

标签： php jquery ajax kineticjs

【解决方案1】：

你的 JS 部分是正确的：

function upload() {
    stage.toDataURL({
        callback: function (dataUrl) {
            $.ajax({
                type: "POST",
                url: 'export.php',
                dataType: 'text',
                data: {
                    base64data: dataUrl
                }
            });
        }
    });
}

在 PHP 中，数据以下列模式到达：'data:image/png;base64,...characters'; ...所以你必须提取图像部分。

<?php
$data = $_POST['base64data'];

list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);

file_put_contents('image.png', $data);

请注意，此解决方案并非特定于 kineticjs。它可以与任何 HTML5 画布一起使用，前提是您将 stage.toDataURL() 调用替换为 canvas.toDataURL()。

【讨论】：

谢谢，我有发送图像的代码，我希望用户在按下提交按钮之前填写一些表单字段（姓名、电子邮件地址等） - 所以我需要将它们传递给export.php 也是...