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

任何人都知道如何以其他两种格式保存画布，svg和json：

Answer 1

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

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

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

不幸的是，IM的新用户对此一无所知。他们将IM视为可以将PDF转换为Postscript的转换器，在预期的输出设备上生成具有“块状”混叠效果，“褪色”颜色或模糊图像的图像，这些图像看起来并不好看。

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

也就是说，将png图像转换为svg图像的“最佳”方式是所提到的“表面矢量图像包装器”。这意味着，您将定义一个显示PNG图像的svg图像，就像HTML页面显示图像一样，定义为数据网址。 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'); 
        });
    });
});

将canvas作为svg和json保存在服务器上

1 个答案: