将画布保存为服务器上的svg和json

Question

我想将画布（它具有图像，文本，形状等）保存到服务器上的svg。

实际上，我希望画布以3种格式保存画布 - png文件，svg文件和JSON文件。

这是我的画布，PNG代码：

的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代码（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.'; 
} 

人知道如何保存在其它两种格式的画布，svg和json：

Answer 1

JSON是结构化数据的格式。没有有意义的方式将图像保存为JSON。

对于SVG，它是矢量图形的格式，而从画布获得的图像是光栅化图像。从光栅图像到矢量图像的转换通常被认为是一个坏主意。您可以阅读ImageMagick库上的tutorial。虽然库提供了这种转换，但它会发出警告

换句话说，来自IM的任何输出都不会是真正的矢量格式。虽然它可以将其内部光栅格式转换为矢量格式文件，但结果只是光栅格式图像周围的表面矢量图像包装。除非输出设备的栅格图像被正确定义（以正确的分辨率），否则结果不会特别好。

不幸的是，即时消息的新用户对此不了解。他们将IM视为可将PDF转换为Postscript的转换器，从而在预期的输出设备上生成具有“块状”混叠效果，“洗出”颜色或模糊图像的图像，而这些图像看起来不太好。

这里所说的关于PDF到Postscript的说法对于PNG到SVG也是如此。这不是该库的一个功能，而是所有栅格到矢量转换的基本问题。

也就是说，将png图像转换为svg图像的“最佳”方式是所提及的“肤浅的矢量图像包装器”。这意味着，您可以定义一个svg图像来显示PNG图像，就像HTML页面显示的图像一样，定义为数据url。 SVG是一种XML文件格式，可以像这样在PHP中构建：

// $_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()); 

数据url字符串必须被复制到svg文件中。宽度和高度的值必须用画布的大小替换。你必须传递他们在您的POST请求：

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'); 
     }); 
    }); 
});