YES !!

Question

我有一个问题。我现在已经谷歌了几个小时：）

背景信息 我有一个绘制和创建SVG的Javascript。我找到了一个为客户端创建下载链接的函数（下面的代码），这样可以正常工作。但我希望这与众不同。

问题：如何在服务器端页面退出/重新加载时保存此SVG？

这是我用于客户端保存按钮的代码：

   var downloadAsSVG = function (fileName) {

   if(!fileName) {
       fileName = "example.svg"
   }

   var url = "data:image/svg+xml;utf8," + encodeURIComponent(mySvg.getSerializedSvg(true));

   var link = document.createElement("a");
   link.download = fileName;
   link.href = url;
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
}

现在JS中的这篇文章使用“canvas2svg”来抓取我的SVG：

    mySvg.getSerializedSvg(true)

我可以想象使用纯JS是不可能的，牢记安全性。

Answer 1

在客户端上你可以使用相当新的fetch API在这里发布你的数据我把它作为json发布到json消费端点

catch

在客户端上它更简单...保存它

var data = new FormData();
    data.append( "json", JSON.stringify( {svg: mySvg.getSerializedSvg(true) } ) );

    x= fetch("/some/json/consuming/url",{
          method: "POST",
          body: data
       })
       .then(function(res){ return res.json(); })
       .then(function(data){ alert( JSON.stringify( data ) ) })

并加载

localStorage.setItem("mysvg", mySvg.getSerializedSvg(true));

只是一行代码。

如果你想留在客户端（明智地编写脚本），但仍想保存到服务器，你可能会看一下firebase

Answer 2

YES !!

终于做到了。我结合了stackoverflow上找到的多个答案

1

JS - 此函数将数据发送到save php

    var exportAsSVG = function (fileName) {
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.open("POST","savefile.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("svgData="+rttSvg.getSerializedSvg(true));
    }

2

php - 这是save file.php

    <?php
    $post_data = $_POST['svgData'];
    if (!empty($post_data)) {
    $dir = 'images/';
    //$file = 'test';
    $file = date('Y-m-d-G-i-s');
    $filename = $dir.$file.'.svg';
    $handle = fopen($filename, "w");
    fwrite($handle, $post_data);
    fclose($handle);
    echo $file;
    }
    ?>

3

JS - 当你刷新或离开页面时会运行它。

       window.onbeforeunload = function(){
       exportAsSVG();
    }
    // OR
    window.addEventListener("beforeunload", function(e){
       exportAsSVG();
    }, false);

4

下一步我将介绍如何为自动保存功能实现本地存储选项。为此，我还将文件名/时间戳移动到主文件作为参考。

非常感谢你帮助@holger！

PHP - 在退出/重新加载页面上保存图像 - 服务器端

2 个答案:

YES !!

1

2

3

4