将编辑的 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,并将其用作<img>
元素的源。将此图像绘制到 HTML5 画布上,然后使用 toDataURL()
将内容转换为 base64 编码的 PNG 数据 URI,然后您可以将其发布到您的服务器并保存为文件。
警告:Chrome 的当前版本和 Firefox 的半新版本(但不是最新版本)目前在安全性上“强调”并在您绘制任何 SVG 时污染画布,从而阻止您获取数据 URI。
注意:以上两个答案都需要 IE9+;但是,对于 SVG 也是如此。
【讨论】:
感谢您的帮助!我听说过 Base64 编码的东西,但对此一无所知。我会尝试一些你的建议,但它会花一些时间。如果它有帮助,我会回复你并标记它:) ...看起来我还需要在 Canvas 上做更多的阅读:( 感谢您的帮助,但看起来与我一起工作的其他人找到了 Raphael 的序列化程序,所以我们正在使用它。以上是关于将编辑的 SVG 文件另存为新文件或数据库的主要内容,如果未能解决你的问题,请参考以下文章
如何将文件夹中的多个源工作簿中的数据复制到另一个工作簿,然后另存为新工作簿