Question

我用帆布KineticJS投掷了一些物体，我试过了 canvas.toDataURL("image/png"); 但是我不知道如何在我点击提交按钮时获取params值我希望向服务器发送一些参数，

感谢

Answer 1

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


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

//根据技术在您的功能或方法或模型中接受您的数据服务器端例如在php中：-echo（$ _ POST [“yourData”]）;

Answer 2

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
}

使用Canvas将数据发送到服务器

2 个答案: