将编辑的 SVG 文件另存为新文件或数据库

Posted

技术标签:

【中文标题】将编辑的 SVG 文件另存为新文件或数据库【英文标题】:Saving an edited SVG file as a new file or to DB 【发布时间】:2012-06-20 11:15:20 【问题描述】:

我不需要经常提问,但这次 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 DB 和 PDF 是最低要求。 PDF 是供用户保存和打印的……他们想做什么,而 DB 是用于在线保存。

我也将 JQuery 链接到该站点,但我发现 Javascript 更自然地编写代码,以太方式我需要某种解决方案/示例/插件。谁能帮忙!?

【问题讨论】:

【参考方案1】:

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

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

检索到文本框中的值。假设您的值已经从数据库中检索到,并且现在位于名为 theValues 的数组中。基本上我正在删除任何反斜杠,但在此之前我要确保它可以使用 htmlentities 正确显示。由于您在 svg 中没有反斜杠,我知道它修复了服务器用 \" 替换引号的位置。如果您在 svg 中遇到一些反斜杠,您只需要在替换函数中更聪明一点。@ 987654322@

回显到页面的原因与上述相同,但 htmlentities 功能使其仅显示 svg 的文本,而不是处理 svg 并显示您的图片。这只是在文本存储在数据库中后显示 svg 时需要的,但它不会损害您的显示如果不是第一个数据,只是一个不必要的函数调用。str_replace("\\", "",$myValue)

【讨论】:

【参考方案2】:

另存为 SVG

使用XMLSerializer 获取您的 SVG 的源 XML 表示,并将其发布回您的服务器(如果您愿意,可以使用 AJAX)。

另存为 PNG

使用XMLSerializer 为您的SVG 创建一个data URI,并将其用作&lt;img&gt; 元素的源。将此图像绘制到 HTML5 画布上,然后使用 toDataURL() 将内容转换为 base64 编码的 PNG 数据 URI,然后您可以将其发布到您的服务器并保存为文件。

警告:Chrome 的当前版本和 Firefox 的半新版本(但不是最新版本)目前在安全性上“强调”并在您绘制任何 SVG 时污染画布,从而阻止您获取数据 URI。

注意:以上两个答案都需要 IE9+;但是,对于 SVG 也是如此。

【讨论】:

感谢您的帮助!我听说过 Base64 编码的东西,但对此一无所知。我会尝试一些你的建议,但它会花一些时间。如果它有帮助,我会回复你并标记它:) ...看起来我还需要在 Canvas 上做更多的阅读:( 感谢您的帮助,但看起来与我一起工作的其他人找到了 Raphael 的序列化程序,所以我们正在使用它。

以上是关于将编辑的 SVG 文件另存为新文件或数据库的主要内容,如果未能解决你的问题,请参考以下文章

遍历下拉列表并将工作簿另存为新文件

如何将文件夹中的多个源工作簿中的数据复制到另一个工作簿,然后另存为新工作簿

将“另存为新”按钮添加到 Django 外部对象编辑弹出窗口

将 Excel 文件另存为新创建的文件夹

如何将选定的工作表另存为新工作簿

html 导入JSON文件并将其另存为新帖子