在服务器上将画布另存为 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 的新用户对此一无所知。他们将 IM 视为一种转换器，可以将 PDF 转换为 Postscript，在预期的输出设备上生成具有“块状”锯齿效果、“褪色”颜色或看起来根本不好看的模糊图像。

这里所说的关于 PDF 到 Postscript 的内容也适用于 PNG 到 SVG。并且不是该库的功能，而是所有光栅到矢量转换的基本问题。

也就是说，将 png 图像转换为 svg 图像的“最佳”方法是上面提到的“表面矢量图像包装器”。这意味着，您将定义一个显示 PNG 图像的 svg 图像，就像 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 文件中。宽度和高度的值必须替换为画布的大小。您必须在您的发布请求中传输它们：

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