javascript - 使用 Canvas 向服务器发送数据

Question

我用画布 KineticJS 绘制了一些对象，我尝试过， canvas.toDataURL("image/png"); 但是当我单击提交按钮时我不知道如何获取参数值我想将一些参数发送到服务器，

谢谢

Answer 1

Kinetic.Stage 上的所有对象都可以序列化为 JSON 字符串：

首先，将阶段序列化为 JSON：

var json = stage.toJSON();

然后可以使用 jquery 的 ajax 方法将该 json 字符串发送到您的服务器：

$.ajax({
  type: "POST",
  url: "http://yourSite.com/saveTheStage.php",
  data: {stageJSON: stage.toJSON()}
})
.done(function(respond){alert("done: "+respond);})
.fail(function(respond){alert("fail");})
.always(function(respond){alert("always");})

在服务器上，读取接收到的 json 并将其保存为唯一的文件名（此示例使用 PHP）。

<?php 

if ( isset($_POST["stageJSON"]) && !empty($_POST["stageJSON"]) ) { 

    // get the stage data
    $json = $_POST['stageJSON'];

    // create a filename for the new image
    $file = md5(uniqid()) . '.json';

    // decode the image data and save it to file
    file_put_contents($file, $json);

    // return the filename
    echo $file;

}

?>

请注意，stage.toJSON 序列化 Kinetic.Stage 的属性，但不保存 Kinetic 外部的元素。

例如，如果您的舞台有 Kinetic.Image，则 Kinetic.Image 的属性将被序列化（x、y 等），但您注入到 Kinetic.Image 中的图像的 .png 数据不会被序列化。

因此，您以后必须对必须执行 myImage.setImage 的阶段进行反序列化，以将 .png 数据重置为重新水合的 Kinetic.Image。

另请注意，stage.toJSON 不会序列化任何 javascript 变量，因此如果您的 LIGHT 是 javascript 变量，它将不会被序列化。

您可以向 ajax 数据包添加更多数据以包含 LIGHT

data: {
    stageJSON: stage.toJSON(),
    LIGHT: LIGHT
}

Answer 2

$.ajax({
    type: "POST",
    url: url,
    data: "yourData="+encodeURIComponent(canvas.toDataURL());,


    complete: function (result) {
        //your response
    },
    error: function () {
        //if error occured
    }
});

//根据技术在您的函数或方法或模型中接受您的数据服务器端，例如在php中：-echo($_POST["yourData"]);