Отправка данных на сервер с помощью 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 
    } 
}); 

// Подтвердите ServerSide данных в вашей функции или метода или модели в соответствии с технологией например в PHP: -echo ($ _ POST [ "yourData"]);

Answer 2

Все объекты на Kinetic.Stage можно сериализовать в JSON строку:

Во-первых, сериализовать сцену в формате JSON:

var json = stage.toJSON(); 

Затем эта строка JSON может быть отправлен на сервер с помощью Аякса метод JQuery в:

$.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 и т. Д.), Но .png данные изображения, которые вы ввели в Kinetic.Image, не будут сериализованная.

Поэтому вы позже де-сериализуете сцену, вы должны сделать myImage.setImage для сброса данных .png в повторно гидратированный Kinetic.Image.

Также обратите внимание, что stage.toJSON не будет сериализовать переменные javascript, поэтому, если ваш СВЕТ является переменной javascript, он не будет сериализован.

Вы можете добавить данные в свой АЯКС пакет включить LIGHT

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