Question

我不经常需要提问，但Google这次失败了

所以我有一个网站使用Javascript编辑外部SVG文件，如下所示：

<embed id="svgFile" src="svgFile.svg" type="image/svg+xml" />

我有一个带有输入的表单，可以使用Javascript和Jquery动态编辑SVG，如下所示：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="JavascriptFile.js"></script>

....HTML....

<input id="txt1" name="text_one" maxlength="16" type="text" class="text" placeholder="Line one" onkeyup="update(1)" />

javascript是这样的：

function update(n) {var txtID = n;
var txt = document.getElementById("txt" + txtID).value;
var svgTXT = document.getElementById("svgFile").getSVGDocument().getElementById("txt" + txtID);
svgTXT.textContent = txt;
}

现在一切正常，页面上的“图像”/ SVG更新但是现在我需要保存这个更新的图像。
新的我不知道我们需要什么文件格式，但将信息保存到php / MySQL数据库和PDF是最低限度。 PDF是供用户保存和打印的......他们想要做什么，数据库用于在线保存。

我也有JQuery链接到网站，但我发现Javascript更自然地编码，以太方式我需要某种解决方案/示例/插件。任何人都可以帮忙！？

Answer 1

我通过在php和mySQL数据库中使用以下代码段来完成此操作：首先，记住svg基本上就像HTML一样存储在文本中。并且svg标签，都是不同的标签，与HTML标签非常相似。

存储到数据库中。您必须在实际的mySQL Insertcall中使用以下代码段。我发现如果你首先对变量执行此操作然后将变量放入insert调用中它将无法工作。该函数必须在mySQL语句中 mysql_real_escape_string($myValue)

在值中检索文本框。假设您的值已经从数据库中检索到，现在位于一个名为theValues的数组中。基本上我正在删除任何反斜杠，但在手之前，我确保它可以使用htmlentities正确显示。由于你在svg中没有反斜杠，我知道它修复了服务器用\“替换引号的地方。如果你在svg中遇到一些反斜杠，你只需要在你的替换功能中更聪明一点。
$myValue= str_replace("\\", "", htmlentities($theValues->myValue)); echo $myValue;

回显一个页面与上面相同的原因，但是htmlentities函数使它只显示svg的文本而不是处理svg并显示你的图片。这只是在已经存储在数据库中的文本之后显示svg所必需的，但它不会伤害你的显示器如果它不是第一个数据，只是一个不必要的函数调用。
str_replace("\\", "",$myValue)

Answer 2

另存为SVG

使用XMLSerializer获取SVG的源XML表示，然后将其发布回服务器（如果愿意，可以使用AJAX）。

另存为PNG

使用XMLSerializer为您的SVG创建data URI，并将其用作<img>元素的来源。将此图像绘制到HTML5画布，然后使用toDataURL()将内容转换为base64编码的PNG数据URI，然后您可以将其发布到服务器并另存为文件。

警告：当前版本的Chrome和半新版本的Firefox（但不是最新版本）目前在安全性方面“突然”，并在绘制任何SVG时污染画布，阻止您获取数据URI。

注意：上述两个答案都需要IE9 +;但是，对于SVG来说也是如此。

将已编辑的SVG文件另存为新文件或DB

2 个答案:

另存为SVG

另存为PNG