使用Canvas

Question

將數據發送到服務器我卓爾一些物體用帆布KineticJS， 我試過 canvas.toDataURL("image/png"); 但我不知道怎麼去PARAMS值，當我在提交按鈕我想送一些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(); 

然後是JSON字符串可以使用發送到您的服務器jQuery的AJAX方法：

$.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包包括輕

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