Save canvas as svg and json on server

Question

i want to save canvas ( it have image,text,shape etc ) to svg on server.

actually i want the canvas save the canvas in 3 formats - png file, svg file and JSON file.

this is my canvas to png code:

jquery :

jQuery(document).ready(function(){
    jQuery('#btnSave').click(function(){
     var pic =document.getElementById("myCanvas").toDataURL('image/png');
         $.ajax({
          type: "POST",
          url: "script.php",
          data: { 
             img: pic
          }
        }).done(function(o) {
          console.log('saved'); 
        });
    });
});

php code (script.php):

if (isset($_POST['img'])) {
    define('UPLOAD_DIR', 'uploaddesign/');
    $img = $_POST['img'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = UPLOAD_DIR . uniqid() . '.png';
    $success = file_put_contents($file, $data);
    print $success ? $file : 'Unable to save the file.';
}

anyone know how to save canvas in other two format , svg and json :

Answer 1

JSON is a format for structured data. There is no meaningfull way to save an image as JSON.

As for SVG, it is a format for vector grafics, while the image you get from the canvas is a rasterized image. A conversion from raster images to vector images is mostly considered to be a bad idea. You can read up on that for example in the tutorial on the ImageMagick library. While the library offers such a conversion, it warns

In other words, any output from IM will never be a true vector format. While it can convert its internal raster format into a vector format file, the result is only a superficial vector image wrapper around an image in raster format. And unless the raster image is defined properly (at the right resolution) for the output device, the result will not be particularly good.

Unfortunately new users to IM do not know anything about this. They see IM as a converter that can convert say PDF to Postscript, producing images with 'blocky' aliasing effects, 'washed out' colors, or blurry images that just do not look good at all, on the intended output device.

What is said here about PDF to Postscript would also be true for PNG to SVG. And is not a feature of that library, but a basic problem of all raster-to-vector conversions.

That said, the "best" way to convert png images to svg images is the mentioned "superficial vector image wrapper". This means, you would define a svg image that displays a PNG image just like a HTML page displays an image, defined as a data url. SVG is a XML file format and could be constructed in PHP like this:

// $_POST validation

$str = <<<XML
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"
     width="$_POST['width']"
     height="$_POST['height']">
    <image xlink:href="$_POST['img']"
           width="$_POST['width']"
           height="$_POST['height']">
</svg>
XML;

$svg = new DOMDocument('1.0', 'UTF-8');
$svg->xmlStandalone = false;
$svg->loadXML($str);

$file = UPLOAD_DIR . uniqid() . '.svg';
file_put_contents($file, $svg->saveXML());

The data url string has to be copied into the svg file. The values for width and height have to be replaced with the size of the canvas. You'd have to transmit them in your post request:

jQuery(document).ready(function(){
    jQuery('#btnSave').click(function(){
        var pic = document.getElementById("myCanvas");
        $.ajax({
            type: "POST",
            url: "script.php",
            data: { 
                img: pic.toDataURL('image/png'),
                width: pic.width
                height: pic.height
            }
        }).done(function(o) {
            console.log('saved'); 
        });
    });
});